Integra tu tienda online y la venta de tarjetas regalo en tu web

🟢Beginner 3 min read

Así muestras tu tienda de FlowDule o tu venta de tarjetas regalo directamente en tu propia web con un solo fragmento de código.

Si tienes activado el módulo de tienda online, tus clientes pueden comprar productos y tarjetas regalo directamente en tu propia web - sin salir de ella. Es el mismo widget que para las reservas, solo que con otra vista.

Antes de empezar

• El módulo de tienda online debe estar activo para tu cadena. Lo activas en Configuración → Módulos.
• Necesitas tu slug de reservas - la parte antes de .flowdule.com en tu dirección de reservas. Si tu página es klinik-nord.flowdule.com, tu slug es klinik-nord.

Tienda en la página

Pega el fragmento donde deba mostrarse la tienda. El widget crea su propio iframe y ajusta la altura automáticamente:

<script
  src="https://klinik-nord.flowdule.com/widget.js"
  data-slug="klinik-nord"
  data-view="shop"
></script>

Los visitantes pueden añadir productos al carrito y pagar, sin poder navegar a tus otros módulos dentro de la vista.

Venta de tarjetas regalo

El mismo principio, solo que con data-view="giftcard":

<script
  src="https://klinik-nord.flowdule.com/widget.js"
  data-slug="klinik-nord"
  data-view="giftcard"
></script>

Como botón con ventana emergente

Si prefieres un botón “Comprar tarjeta regalo” en tu navegación o pie de página, usa la vista modal:

<script
  src="https://klinik-nord.flowdule.com/widget.js"
  data-slug="klinik-nord"
  data-view="giftcard"
  data-mode="modal"
  data-button-text="Comprar tarjeta regalo"
></script>

Varios widgets en la misma página

Puedes combinarlos sin problema - p. ej., reservas arriba y tienda más abajo. Da a cada widget su propio elemento con data-target:

<div id="flowdule-booking"></div>
<div id="flowdule-shop"></div>

<script
  src="https://klinik-nord.flowdule.com/widget.js"
  data-slug="klinik-nord"
  data-target="flowdule-booking"
></script>
<script
  src="https://klinik-nord.flowdule.com/widget.js"
  data-slug="klinik-nord"
  data-view="shop"
  data-target="flowdule-shop"
></script>

Tema, idioma y fondo

El widget sigue por defecto la configuración clara/oscura del sistema del visitante y el idioma de la cadena. Lo controlas con data-theme (light, dark, auto), data-locale (da, en o de) y data-background="surface", que da al widget su propio color de fondo.

La lista completa de opciones, las guías paso a paso para WordPress, Wix, Squarespace y Webflow y la solución de problemas están en Integra tu página de reservas en tu web.

Solución de problemas

¿No se muestra la tienda o la página de tarjetas regalo?

• Comprueba que el módulo de tienda online está activado para tu cadena - el widget solo puede mostrar módulos que usas
• Comprueba que data-view está escrito exactamente shop o giftcard
• Comprueba que tu slug es correcto