Incorporar o Widget de Reservas

O widget Levy Bookings e um bundle JavaScript pequeno e sem dependencias (~6 KB) que carrega de widget.levyelectric.com/v1.js e injeta um iframe seguro apontando para sua pagina hospedada.

Funciona em:

Squarespace, Wix, Webflow, Shopify
WordPress (qualquer tema com bloco HTML custom)
HTML codado a mao / Next.js / React / Astro / Hugo / Jekyll

O snippet

Pegue do dashboard:

Dashboard > Bookings > Widgets > {seu widget}.
Obter codigo embed.
Escolha modo (inline, modal, botao flutuante).
Copie e cole no site.

O snippet:

<!-- Embed inline -->
<div id="levy-bookings"></div>
<script
  src="https://widget.levyelectric.com/v1.js"
  data-slug="front-beach-bikes"
  data-mode="inline"
  data-target="#levy-bookings"
  data-theme="light"
  async
></script>

Modos de incorporacao

Inline

Widget injeta iframe num elemento alvo. Use em pagina dedicada "Reservar bike".

<div id="levy-bookings"></div>
<script
  src="https://widget.levyelectric.com/v1.js"
  data-slug="front-beach-bikes"
  data-mode="inline"
  data-target="#levy-bookings"
  async
></script>

O iframe se redimensiona automaticamente.

Widget injeta iframe oculto e abre como overlay ao clicar em elemento com data-levy-book="open".

<button data-levy-book="open">Reservar bike</button>

<script
  src="https://widget.levyelectric.com/v1.js"
  data-slug="front-beach-bikes"
  data-mode="modal"
  async
></script>

Botao flutuante

Widget injeta botao "Reservar agora" fixo no canto inferior direito em toda pagina.

<script
  src="https://widget.levyelectric.com/v1.js"
  data-slug="front-beach-bikes"
  data-mode="floating-button"
  data-button-label="Reservar bike"
  data-button-position="bottom-right"
  async
></script>

Referencia de atributos data

Atributo	Obrigatorio	Padrao	Descricao
`src`	sim	-	Deve ser `https://widget.levyelectric.com/v1.js`
`data-slug`	sim	-	Slug do seu widget
`data-mode`	sim	`inline`	`inline`, `modal`, `floating-button`
`data-target`	inline	`#levy-bookings`	Seletor CSS do host
`data-theme`	nao	`light`	`light`, `dark`, `minimal`
`data-button-label`	floating	`Reservar agora`	Texto do botao
`data-button-position`	floating	`bottom-right`	Posicao do botao
`data-locale`	nao	navegador	Forcar `en`, `es`, `fr`, `de`, `pt`
`data-utm-source`	nao	-	UTM
`data-pixel-ga4`	nao	-	GA4 ID
`data-pixel-meta`	nao	-	Meta Pixel ID
`async`	recomendado	-	Carregamento nao bloqueante

Eventos de conversao

<script>
  window.addEventListener('message', (event) => {
    if (event.origin !== 'https://widget.levyelectric.com') return;
    if (event.data?.type === 'levy:event') {
      const { eventName, payload } = event.data;
      console.log('Evento Levy:', eventName, payload);
    }
  });
</script>

Com data-pixel-ga4 ou data-pixel-meta, eventos sao encaminhados automaticamente.

Dominios personalizados

book.frankebikes.com em vez de fleets.levyelectric.com/book/{slug}:

CNAME book.frankebikes.com para cname.levyelectric.com.
Ticket de suporte com dominio desejado. Provisionamos TLS e roteamento em um dia util.
Atualize a URL Publica no widget.

Squarespace

Squarespace bloqueia <script> em blocos de texto:

Edite a pagina.
Adicione bloco Code.
Cole o snippet.

Para botao flutuante: Configuracoes > Avancado > Code Injection > Footer.

Wix

Editor > + Adicionar Elementos > Embed Code > Embed HTML.
Cole.

WordPress

Em bloco HTML custom (Gutenberg) ou widget Text (Classico) cole direto.

Shopify

Temas > Editar codigo.
layout/theme.liquid.
Cole antes de </body>.

Performance

Script ~6 KB com async. Iframe lazy-load, Stripe.js so na etapa de pagamento. TTI < 200 ms em 3G.

Origens permitidas

Antes do widget aceitar POSTs, liste origens:

https://www.frankebikes.com
https://frankebikes.com

GETs sao CORS-abertos. So POSTs precisam da lista.

Apple Pay

Apple Pay em iframes funciona porque hospedamos em widget.levyelectric.com, registrado como dominio de comerciante em cada conta Stripe conectada.

Incorporar o Widget