Widget openen vanaf je site

De widget hoeft niet alleen via de ronde knop te openen. Je kunt hem ook openen vanuit je eigen knoppen. Denk aan Offerte aanvragen op je prijzenpagina, Bel mij terug in je menu, of een link in een mailing die direct de juiste flow opent.

Met een link

Gebruik een link die begint met #leadspotr:

<!-- het menu van de widget -->
<a href="#leadspotr">Neem contact op</a>

<!-- een flow, met het ID uit de flowbouwer -->
<a href="#leadspotr:offerte-aanvragen">Offerte aanvragen</a>

<!-- een vaste actie -->
<a href="#leadspotr:callback">Bel mij terug</a>

Mogelijke acties:

Het ID van een flow staat bij /admin/widget naast de knoptekst van de flow. Daaronder staat ook de kant-en-klare link, bij Link op je site. Wil je een flow alleen via je eigen knop aanbieden? Zet dan in het menu uit bij die flow.

Een link werkt op elke knop of elk menu-item waar je zelf de URL kunt invullen, ook in WordPress, Webflow of een paginabouwer.

Vanaf een andere pagina of in een mail

Een link met #leadspotr:… achter een volledige URL opent de widget direct bij het laden van de pagina:

https://jouwbedrijf.nl/prijzen#leadspotr:offerte-aanvragen

Handig in:

• mailings en nieuwsbrieven;
• advertenties die naar een landingspagina leiden;
• je e-mailhandtekening (Plan direct een terugbelafspraak).

Met JavaScript

Roep leadspotr('open', …) aan vanuit je eigen code:

leadspotr('open');                     // het menu
leadspotr('open', 'offerte-aanvragen'); // een flow
leadspotr('open', 'callback');          // een vaste actie

Bijvoorbeeld op een knop:

<button type="button" onclick="leadspotr('open', 'demo-plannen')">Plan een demo</button>

Roep je dit aan voordat het script geladen is, bijvoorbeeld vroeg in de pagina? Zet dan eerst de wachtrijregel in de <head>, vóór het snippet:

<script>window.leadspotr = window.leadspotr || function () { (window.leadspotr.q = window.leadspotr.q || []).push(arguments) };</script>

De widget opent dan zodra hij geladen is.

Waar let je op?

• De widget moet aan staan bij /admin/widget, en op die pagina mogen verschijnen. Staan er pagina's ingevuld bij Alleen op deze pagina's, dan doet een link op een andere pagina niets.
• De actie moet beschikbaar zijn. Opent je link een actie die niet aan staat, dan opent het menu. Een afspraak werkt alleen met afspraaktypes. De AI-chat werkt alleen als hij aan staat en de maandlimiet niet bereikt is.
• Klopt het ID? Een ID dat niet bestaat opent ook het menu. Kopieer het ID exact uit de flowbouwer. Na het opslaan blijft het ID gelijk, ook als je later de knoptekst wijzigt.
• Single-page apps. Navigatie zonder herladen wordt gevolgd. De widget laadt per pagina opnieuw zijn instellingen, zodat paginaregels kloppen.

Voorbeelden

Prijzenpagina met drie pakketten:

<a class="button" href="#leadspotr:offerte-aanvragen">Vraag een offerte aan</a>
<a class="button secondary" href="#leadspotr:callback">Liever eerst bellen?</a>

Navigatiemenu in WordPress: voeg een Aangepaste link toe met als URL #leadspotr en als tekst Contact.

Supportpagina: een knop met #leadspotr:chat voor vragen, en #leadspotr:whatsapp voor wie liever appt.

Meer over het bouwen van flows lees je in Flows en leadformulieren.