Introducción
¿Quieres mostrar la sección de referencias Loyoly en una página personalizada de tu tienda PrestaShop? La integración vía iframe te permite desplegarla en cualquier página, con un control total del lado del desarrollo.
💡 Esta guía está dirigida a los comerciantes PrestaShop. Es necesario un equipo técnico (interno o agencia) para su puesta en marcha.
Principio
La integración consiste en insertar un iframe que apunte a la sección de referencias Loyoly en la página objetivo de tu tienda. La URL del iframe debe construirse dinámicamente con varios parámetros para recuperar la información correcta del cliente y de la tienda.
URL de base:
https://play.loyoly.io/play/shopify/section-referral
Parámetros de la URL
Se deben añadir varios parámetros a la URL de base para que el iframe funcione correctamente:
langcode: código de idioma de la página de 2 caracteres (
fr,en,es, etc.)customer_id: identificador técnico del cliente conectado
currencycode: código de la moneda de 3 caracteres (
EUR,USD, etc.)currencyrate: tipo de cambio de la moneda actual con respecto a la moneda de base de la tienda
shop: nombre técnico de tu tienda del lado de Loyoly. Esta información te la comunica tu CSM durante el despliegue.
Ejemplo de URL completa:
https://play.loyoly.io/play/shopify/section-referral?langcode=fr&customer_id=5555¤cycode=EUR¤cyrate=1&shop=tu-tienda
Puesta en práctica
Para que los parámetros de la URL sean dinámicos, añade el iframe mediante un script JavaScript: así puedes recuperar la información del cliente conectado, del idioma y de la divisa desde el contexto de PrestaShop, y luego construir la URL e insertar el iframe en la página.
⚠️ Importante: para permitir la copia del enlace de referencia desde el iframe, añade el atributo allow="clipboard-read; clipboard-write" al iframe. Sin esto, el botón de copia no funcionará.
Ejemplo de iframe para insertar
<iframe allow="clipboard-read; clipboard-write" id="loyoly-referal" style="width: 100%; border: 0;" src="https://play.loyoly.io/play/shopify/section-referral?langcode=fr&customer_id=5555¤cycode=EUR¤cyrate=1&shop=tu-tienda"></iframe>
✨ Buena práctica: no dejes los valores de customer_id, langcode, currencycode y currencyrate codificados directamente. Recupéralos dinámicamente desde el contexto de PrestaShop (variables Smarty, objeto customer conectado, divisa activa) antes de construir la URL.
Preguntas frecuentes
El botón de copia del enlace de referencia no funciona, ¿por qué?
Verifica que el atributo allow="clipboard-read; clipboard-write" esté presente en el iframe. Es la autorización que permite a la sección de referencias escribir en el portapapeles del visitante.
El iframe se muestra vacío o no carga nada, ¿qué hacer?
Verifica prioritariamente el parámetro shop (debe coincidir exactamente con el nombre comunicado por tu CSM) y el customer_id (el cliente debe existir en Loyoly). Una URL mal formada o un parámetro faltante impide la carga.
¿Cómo recuperar el customer_id del lado de PrestaShop?
El customer_id corresponde al identificador técnico del cliente tal como está sincronizado con Loyoly. Del lado de PrestaShop, puedes recuperarlo mediante el objeto $customer del lado front (id PrestaShop). Si tienes dudas sobre el mapping, contacta a tu CSM de Loyoly.
¿Qué ocurre si el visitante no está conectado?
El iframe no puede mostrar una sección de referencias personalizada sin customer_id. Condiciona la visualización del iframe a la conexión del cliente, o muestra un mensaje de invitación a conectarse en la página.
¿Una pregunta técnica o un caso particular?
Contacta a tu CSM de Loyoly, hará el enlace con el equipo técnico.