Añadir el widget de VivaPoints a tu web

Añadir el widget es copiar y pegar una vez. El trabajo entero lleva menos de cinco minutos, y la mayor parte es encontrar dónde te deja pegar HTML tu web.

Antes de empezar

Necesitas dos cosas:

• La dirección de tu web, tal y como la ven los visitantes: ejemplo.com, o tienda.ejemplo.com si la página está en un subdominio.
• Un sitio de tu web que acepte HTML. En WordPress es un bloque HTML personalizado; en Squarespace, un bloque de código; en Shopify, editando el HTML de una página. Si tu creador de webs no tiene nada así, el widget no puede ir ahí.

Paso 1 — actívalo y da de alta tu web

Abre Widget para tu web en tu panel.

1. Añade tu web en Webs autorizadas a mostrarlo, una por línea. Escríbela como ejemplo.com: sin https:// y sin barra final.
2. Activa Mostrar el widget en mi web.

Haz primero el dominio. El widget se niega a cargar en cualquier sitio que no hayas dado de alta, así que activarlo con la lista vacía te da un recuadro en blanco y cinco minutos de desconcierto.

Paso 2 — elige el formato

Completo para una página propia. Compacto para una barra lateral o un pie. Puedes cambiarlo después sin volver a tocar tu web: el fragmento es el mismo.

Paso 3 — copia el fragmento

En Pega esto en tu web encontrarás algo así:

<iframe
  data-vp-embed
  src="https://app.vivapoints.com/embed/tu-negocio?variant=full"
  title="Tus recompensas"
  height="560"
  loading="lazy"
  style="border:0;width:100%;max-width:520px;display:block"
></iframe>
<script src="https://app.vivapoints.com/embed/v1.js" async></script>

Pulsa Copiar. No lo escribas a mano: la dirección del centro es la de tu negocio.

La segunda línea es opcional. Hace que el widget se ajuste solo al alto de su contenido, de modo que el recuadro crece cuando un cliente entra y encoge cuando sale. Si la quitas, el widget mantiene el alto fijo del fragmento, que también funciona: simplemente no puede encoger. Si tu creador de webs no acepta etiquetas <script>, quita esa línea y conserva el resto.

Paso 4 — pégalo y publica

Pégalo en tu bloque de HTML y publica. Es la última vez que necesitas tocar tu web.

Cómo comprobar que funciona

Abre la página como la vería un visitante, no en la vista previa de tu creador de webs, que a menudo la muestra dentro de otro marco y puede liarlo todo. Deberías ver el recuadro de acceso con tus colores.

Después haz una vuelta completa de verdad:

1. Escribe el correo de un cliente que esté realmente en tu programa. El tuyo, si te diste de alta.
2. Espera el código de seis dígitos y escríbelo.
3. Comprueba que ves su saldo real.

Si funciona una vez, funciona.

Si ves un recuadro en blanco

Casi siempre es una de tres cosas, en este orden:

1. La web no está en tu lista. La dirección de la barra del navegador tiene que coincidir con lo que diste de alta, incluido el www. Es la causa nueve de cada diez veces.
2. El widget está desactivado. Comprueba el interruptor.
3. Estás en la vista previa del creador de webs. Publica y abre la página real.

Si no es ninguna, mira Dominios permitidos y seguridad de tu widget, que explica qué significa el rechazo y cómo leerlo.

Si un cliente dice que no le llega el código

Pregúntale qué dirección escribió. El widget da la misma respuesta exista o no esa dirección en tu programa, porque si no cualquiera podría usarlo para averiguar quiénes son tus clientes. Así que "no me llega el código" casi siempre significa "esa no es la dirección con la que me di de alta".

Búscalo en tu página de Clientes y dile qué dirección consta.

Moverlo o quitarlo

Moverlo a otra página es cortar y pegar; en tu panel no cambia nada. Quitarlo es borrar el bloque. Si quieres que desaparezca de todas las páginas a la vez y no recuerdas dónde lo pusiste, desactiva Mostrar el widget en mi web: todas las copias dejan de mostrarse al instante.