# Widget de post-checkout de Shopify

Las referencias a menudo provienen de páginas posteriores al pago con mucho tráfico, lo que convierte estos espacios en lugares ideales para promocionar tu programa de referidos. El Widget de Post-Checkout de Shopify te permite involucrar a los clientes sin interrupciones justo después de la compra, aumentando las referencias. Al aprovechar el marco de extensibilidad de Shopify, este widget ofrece una experiencia integrada y con la marca que maximiza el impacto del programa.

Si tu programa no está presente aquí, podrías estar perdiendo una valiosa participación y quedando detrás de los competidores que ya aprovechan estas ubicaciones.

#### ¿Qué es el widget de post-checkout de Shopify?

Nuestro Widget de Post-Checkout aprovecha **Shopify Checkout Extensibility** para colocar un llamado a la acción (CTA) de referido con la marca en las páginas posteriores al pago. Refleja el popular [Instant Access Widget](https://help.impact.com/brand/es/sobre-que-te-gustaria-aprender/advocate-program/manage-advocate-participant-experiences/widget-experiences/set-up-an-instant-access-widget) y admite:

* Visualización embebida
* Visualización en modal emergente

Ambas versiones cuentan con dos estados principales del widget:

* Captura de correo electrónico / Identificación del usuario
* Página para compartir con detalles del referido

#### Características clave

El Widget de Post-Checkout de Shopify está diseñado para maximizar la participación en referidos. Presenta un flujo de dos pasos: primero, el widget identifica al usuario recabando su correo electrónico (si no ha iniciado sesión), y luego muestra su enlace o código de referido personalizado junto con botones para compartir. Para los usuarios de Shopify que hayan iniciado sesión, el paso del correo electrónico se omite por completo para una experiencia más fluida.

El widget admite ambas opciones de visualización, embebida y emergente, por lo que puedes elegir el formato que mejor se adapte al diseño de tu tienda y a la experiencia del cliente. Se conecta sin problemas con tu programa de referidos para crear o actualizar perfiles de participantes y obtener los datos necesarios del referido, como el enlace para compartir, el código de referido y las opciones de compartición social. Se pueden mostrar hasta 3 botones para compartir, con soporte para plataformas como Correo electrónico, Facebook, WhatsApp, Messenger, LinkedIn, X (anteriormente Twitter) y SMS.

La personalización es una característica central. Puedes adaptar el contenido de cada paso, incluidos encabezados, subtítulos, botones CTA y mensajes para compartir. También tienes la opción de incluir una imagen en la parte superior del widget para mayor presencia de la marca. Es importante destacar que todas estas configuraciones se pueden ajustar dentro del Editor de Páginas de Shopify, lo que facilita hacer cambios sin salir del administrador de Shopify.

Por último, el widget está diseñado para heredar la identidad visual de tu sitio, por lo que no es necesario configurar manualmente colores o fuentes. Esto garantiza una apariencia y sensación coherentes con el resto de tu tienda.

#### Agregar el Widget a tu sitio

Para agregar el widget Advocate a tu tienda Shopify:

1. Navega a tu *editor de temas*.
2. Selecciona el **navegador de páginas** en la parte superior de la pantalla, luego elige **Checkout and customer accounts**.
3. Repite el paso anterior para la *página de* Gracias.
4. En la sección principal, selecciona **Agregar bloque**, luego elige **Advocate Referral Widget** de la sección de integración de Impact.com.

#### Flujo del widget

La experiencia del widget está diseñada para guiar a los usuarios a través de dos pasos sencillos.

{% stepper %}
{% step %}

### **Paso 1:**

El widget solicita a tu cliente que introduzca su nombre y dirección de correo electrónico, a menos que ya haya iniciado sesión en Shopify, en cuyo caso este paso se omte automáticamente. Una vez capturada la información del usuario, se lo agrega a tu programa como un nuevo participante o se actualizan sus datos si ya está en el programa.

<div data-with-frame="true"><figure><img src="https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-061bb6690e6b6dfa4a077b1ec06087f561906dac%2F571f95c03ce48a5309bb35fa3dfb1dd9f52648a8250997c9c024c97d40539df8.png?alt=media" alt="" width="484"><figcaption></figcaption></figure></div>
{% endstep %}

{% step %}

### **Paso 2:**

Al cliente se le muestran sus detalles de referido. Esto incluye ya sea un enlace de referido único o un código de referido, dependiendo de cómo esté configurado el programa. El widget también muestra hasta 3 botones para compartir, y puedes incluir un breve mensaje encima de la información del referido para fomentar el compartir y reforzar los beneficios del programa.

<div data-with-frame="true"><figure><img src="https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-6a0f04d21deba06ba46938c9470f105773008db9%2F4629f5cdc1fb6845cb83f3e4a6b50b677072e4915ce88d4aa69726630b9c96bb.png?alt=media" alt="" width="492"><figcaption></figcaption></figure></div>
{% endstep %}
{% endstepper %}

**Opciones de personalización**

Todo el contenido visual se puede configurar para reflejar la voz de tu marca. Estas personalizaciones estarán disponibles directamente en el **Editor de Páginas de Shopify** para facilitar su uso.

| Personalización                                | Secciones editables                                                                                                                                                                                                                                                                                                                                                                                                                       |
| ---------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Compartido entre estados del widget            | <p>• URL de imagen (opcional)</p><p>• Encabezado (obligatorio)</p><p>• Subencabezado (opcional)</p><p>• Enlace a términos y condiciones (opcional)</p>                                                                                                                                                                                                                                                                                    |
| Opciones específicas del emergente             | • Etiqueta del botón CTA (por ejemplo, “Comenzar”)                                                                                                                                                                                                                                                                                                                                                                                        |
| Opciones de recopilación de correo electrónico | <p>• CTA del botón "Start Referring"</p><p>• Campo de nombre (opcional)</p>                                                                                                                                                                                                                                                                                                                                                               |
| Opciones de información para compartir         | <p>• Texto personalizado encima del enlace</p><p>• Selecciona hasta 3 medios de botón para compartir:</p><p>• Correo electrónico</p><p>• SMS</p><p>• Facebook</p><p>• Facebook Messenger</p><p>• WhatsApp</p><p>• LinkedIn</p><p>• X (Twitter)</p><p>• Enlace directo</p><p>• Correo electrónico</p><p>• SMS</p><p>• Facebook</p><p>• Facebook Messenger</p><p>• WhatsApp</p><p>• LinkedIn</p><p>• X (Twitter)</p><p>• Enlace directo</p> |
