Zoeken...

Zoeken...

Installatie

Widget installeren

Widget installeren

Om de Flixer Pro widget toe te voegen aan jouw website heb je de volgende dingen nodig:

  • Het unieke ID van jouw bedrijf. Dit ontvang je bij het aanvragen van jouw Flixer Pro abonnement.

  • Enige technische kennis van jouw website. Vraag zo nodig jouw websitebouwer/beheerder om hulp.


Stap 1: Toevoegen

Voeg het volgende stukje code toe aan het einde van de <body> tag van de website, dus net voor </body>.

<script>
  (function (d, s, id) { var fpw = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return; var js = d.createElement(s); js.id = id;
  js.src = "https://widget.flixerpro.io/widget/sdk.js";
  fpw.parentNode.insertBefore(js, fpw);}(document, 'script', 'flixerpro-widget'));
</script>
<div
  class="fp-widget-v1"
  data-brand="PLAATS HIER JOUW UNIEKE ID"
  data-button-theme="dark"
  data-button-color="default"
></div>


Stap 2: Configureren

Vervang PLAATS HIER JOUW UNIEKE ID met het unieke ID van jouw bedrijf, bijvoorbeeld 6789715bf543cbc03a2892fe.


Stap 3: Testen

Als alles goed is gegaan verschijnt de knop rechtsonderin jouw website. Dit ziet er als volgt uit:

Hulp nodig? Neem dan contact met ons op, we helpen je graag verder.


Verdere stappen

Aangepaste configuratie

De widget ondersteunt enkele instelbare opties om deze helemaal aan te laten sluiten bij jouw website. Deze opties plaats je in de <div>-tag van jouw widget, zoals te zien in Stap 1: Toevoegen.

Optie: data-button-theme

Keuzes: "dark" of "light"

Beschrijving: Het thema van de knop om de widget te openen. Kies voor een donkere ("dark") of lichte knop ("light").


Optie: data-button-color

Keuzes: "default" of "primary"

Beschrijving: Het kleuraccent van de knop om de widget te openen. Kies voor de standaard blauwe kleur van Flixer Pro ("default") of de accentkleur van jouw bedrijf ("primary").

Voorbeelden


Standaard blauwe thema 

data-button-color="default"
data-button-theme="dark"


Licht blauw thema 

data-button-color="default"
data-button-theme="light"


Primaire kleur thema (rood voorbeeld)

data-button-color="primary"
data-button-theme="dark"


Licht primaire kleur thema 

data-button-color="primary"
data-button-theme="light"


Gebruiken met bestaande knoppen

Het is mogelijk om de widget te openen/sluiten met bestaande knoppen op jouw website. Gebruik onderstaande anchor tags als link van de knop (de href waarde) om knoppen te linken.

Anchor tag

#fp-open -> Widget openen
#fp-close -> Widget sluiten
#fp-toggle -> Widget openen of sluiten

Gebruik bijvoorbeeld <a href="#fp-open">Vraag nu een offerte aan</a> om de widget te openen met een bestaande knop op jouw website.