Cuando nuestras opciones de componentes no son suficientes para lograr tu diseño, o cuando deseas agregar contenido de otras plataformas a tus pasos, utiliza la opción HTML personalizado.

Agregar un estilo personalizado a un paso o grupo de pasos

Puede haber casos en los que quieras añadir un estilo específico solo a un paso o grupo de pasos de un flujo, para que los demás no se vean afectados. Para ello, envuelve cualquier fragmento de CSS en una etiqueta <style> y colócalo en un componente HTML del paso que quieras modificar.

<style> /* Insert CSS snippet */ 
</style>

Por ejemplo, para cambiar el ancho de un Modal específico, puedes tomar el CSS para hacerlo más angosto y luego envolverlo en etiquetas <style>, como se muestra a continuación.

<style>
appcues[data-pattern-type=modal] cue, appcues[data-pattern-type=modal] > div {
    width: 580px;
    min-width: 580px;
}
</style>

Luego, en tu flujo, usa el bloque HTML para ingresarlo. Puedes ajustar los valores a medida que los ingresas y ver en tiempo real cómo se aplican.

Agregar HTML personalizado

Da rienda suelta a tu creatividad con HTML personalizado que puedes añadir a tus flujos. Por ejemplo, puedes crear un carrusel cíclico para imágenes usando HTML.

<div id="slider">
    <div class="images">
       <div class="images-inner">
        <div class="image-slide">
          <div class="image image1"></div>
        </div>
        <div class="image-slide">
          <div class="image image2"></div>
        </div>
        <div class="image-slide">
          <div class="image image3"></div>
        </div>
      </div>
    </div>

    <div class="slide-selector">
          <label for="slide1" class="slide-slct"></label>
          <label for="slide2" class="slide-slct"></label>
          <label for="slide3" class="slide-slct"></label>
    </div>
</div>


<style>
.image1 {
  background-image: url("https://media.4-paws.org/9/c/9/7/9c97c38666efa11b79d94619cc1db56e8c43d430/Molly_006-2829x1886-2726x1886-1920x1328.jpg");
}

.image2 {
  background-image: url('https://static.scientificamerican.com/sciam/cache/file/1FD432BD-1DC9-4EE3-B2F3494EBAE7DCAE_source.jpg?w=1200');
}

.image3 {
  background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ9UckXzkvboOjQZBmstwQd6pa8OXzcsw1BTQ&s')
}

.image {
  width: 100%;
  height: 400px;
  background-size: cover;
}

.images {
  overflow: hidden;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
}
.images-inner {
  width: 500%;
  transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
  transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
}
.image-slide {
  width: 20%;
  float: left;
}
.image-slide,
.slide-slct {
  transition: all 0.5s ease-out;
}
.slide-selector {
  text-align-last: center;
}

/* Color of bullets */
.slide-slct {
  width: 9px;
  height: 9px;
  border-radius: 5px;
  background: grey;
  display: inline-block !important;
  margin: 0 1px;
}


/* Calculate AUTOPLAY for BULLETS */
@keyframes bullet {
  0%, 33.32333333333334%	{
    background: lightgray;
  }
  33.333333333333336%, 100% {
    background: grey;
  }
}


div .slide-slct:nth-child(1) {
  animation: bullet 12300ms infinite -1000ms;
}

div .slide-slct:nth-child(2) {
  animation: bullet 12300ms infinite 3100ms;
}

div .slide-slct:nth-child(3) {
  animation: bullet 12300ms infinite 7200ms;
}

/* Calculate AUTOPLAY for SLIDES */
@keyframes slide {
  0%, 25.203252032520325%	{ margin-left: 0; }
  33.333333333333336%, 58.53658536585366%	{ margin-left: -100%; }
  66.66666666666667%, 91.869918699187%	{ margin-left: -200%; }
}

#slider .images .images-inner {
  animation: slide 12300ms infinite;
}

</style>

Incrustar contenido externo

Usa un bloque HTML para incrustar contenido externo, por ejemplo, una página de reservas o una encuesta externa. Como regla general, utiliza iFrame para tu contenido. A continuación, encontrarás un ejemplo de iFrame.

<iframe width="100%" height="400px" src="YOUR_URL"></iframe>

Luego, agréguelo usando el bloque HTML. Para ver un ejemplo práctico sobre cómo incrustar una encuesta de Typeform en un flujo Appcues , lea nuestro artículo.

Crear botones personalizados

Si los patrones estándar de los botones de Appcues Appcues te convencen y prefieres crear y personalizar los tuyos propios, puedes emularlos dentro de bloques HTML personalizados añadiendo los atributos HTML adecuados. En particular, el atributo data-step determinará el tipo de acción que debe tener el botón. Por ejemplo, añadir lo siguiente a un bloque HTML personalizado creará una imagen centrada que actuará como un botón con la acción " Siguiente" :

<div class="custom-button-wrapper">
<a data-step="next">
<img src="https://hips.hearstapps.com/hmg-prod/images/sacred-birma-cat-in-interior-royalty-free-image-1718202855.jpg" style="height:100px"/>
</a>
<div>


<style>
.custom-button-wrapper {
align-items: center;
justify-content: center;
display: flex;
}
</style></div></div>

La forma más sencilla de determinar qué atributos agregar es crear un botón nativo con las acciones adecuadas y luego inspeccionarlo mientras se previsualiza el flujo. Un botón con una acción de siguiente paso que rastrea un evento y actualiza una propiedad del usuario, como se muestra a continuación:

Se verá así cuando se inspeccione en modo de vista previa:

Al hacer clic derecho y elegir Editar como HTML, podrá copiar directamente los atributos necesarios ( data-attrs-profile-update y data-attrs-event ) y pegarlos en el HTML de su botón personalizado: