Documentatie

Documentatie omvat widget 1.2.0, CMS-plug-ins 1.1.0 en API-versie 1.2.0. Laatst bijgewerkt: juli 2026.

Snelle start

CallFlow is een gratis terugbelwidget met automatische wachtrij. Een bezoeker van uw website laat een telefoonnummer achter en het verzoek gaat direct naar de CallFlow applicatie op uw telefoon. Het opstarten duurt enkele minuten en bestaat uit drie stappen:

1. Maak een account aan - in de CallFlow-app voor Android of hoger webpaneel. De rekening is gratis.
2. Voeg een pagina toe - Voeg in het gedeelte 'Pakketten en pagina's' uw websiteadres toe en kopieer de korte sleutel die begint met CF-. To publiczny klucz strony (PUBLIC_SITE_KEY) — pozwala wyłącznie wysyłać nowe zgłoszenia, nie daje dostępu do Twojego konta.
3. Plak het script - Plaats de volgende code onmiddellijk vóór de tag </body> swojej strony i podmień klucz oraz adres polityki prywatności.

<script

  src="https://callflowdesk.com/widget/widget.js"

  data-site-key="CF-TWOJ-KLUCZ"

  data-variant="floating"

  data-privacy-url="https://twoja-strona.pl/polityka-prywatnosci/">

</script>

Dat is genoeg. Er verschijnt een zwevende knop op de website en elke melding activeert een pushmelding in de app.

HTML/JS-widget

CallFlow 1.2.0 widget is een productiescript voor gewone HTML-pagina's. Er is geen raamwerk of externe bibliotheken voor nodig. Het formulier draait in een geïsoleerde Shadow DOM - het interfereert niet met de CSS van uw site - en kan alleen nieuwe verzoeken verzenden via de openbare CallFlow API.

Basisinstallatie (zwevende widget)

Plak het script ervoor </body> — dokładnie tak jak w Snelle start. Standaardvariant floating wyświetla pływający przycisk w rogu ekranu, który otwiera formularz.

Ingesloten variant in inhoud

Als u het formulier op een specifieke plaats op de pagina wilt plaatsen (bijvoorbeeld op de contact-subpagina), voegt u een lege container toe en geeft u deze aan met het attribuut data-target:

<div id="callback"></div>

<script

  src="https://callflowdesk.com/widget/widget.js"

  data-site-key="CF-TWOJ-KLUCZ"

  data-target="#callback"

  data-variant="box">

</script>

Beschikbare varianten

• floating — pływający przycisk otwierający formularz (domyślny);
• box — pełny formularz w miejscu osadzenia;
• compact — mniejszy formularz do stopki lub sidebara;
• sticky — pasek przy dolnej krawędzi ekranu;
• ecommerce — pływający formularz przeznaczony dla karty produktu.

Je kunt alle varianten live bekijken op de website Widgetdemo.

Volledige configuratie-attributentabel

Instellingen voor urgentie en privacybeleid worden bovendien opgehaald uit CallFlow. De websitegebruiker kan een functie niet inschakelen die is uitgeschakeld door de accounteigenaar.

Beveiliging en privacy

• script leest geen accountgegevens of ticketlijst;
• kunt u alleen een ticket aanmaken;
• verzending vindt plaats via HTTPS;
• het formulier bevat een honeypot en vereist expliciete toestemming om contact op te nemen;
• de widget slaat geen cookies op en maakt geen gebruik van lokale opslag;
• nummer is genormaliseerd en opnieuw gevalideerd door API; Antwoorden in
• -verzoek heeft een time-out van 15 seconden en een idempotence-sleutel om te beschermen tegen duplicaten.

Uiterlijkaanpassing

Vanaf versie 1.2.0 neemt de widget standaard het lettertype over van de website (inherit, awaryjnie system-ui), a wygląd można dopasować na dwóch poziomach: Gemakkelijk (eenvoudige attributen) i Geavanceerd (CSS met volledig spectrum). Personalisatieattributen kunnen op de tag worden geplaatst <script> of op het doel gespecificeerd door data-target (atrybut na elemencie docelowym ma pierwszeństwo). Bez tych atrybutów widget wygląda tak jak dotychczas.

Eenvoudig niveau - kleuren, afmetingen, lettertype

Elk attribuut is optioneel en wordt toegewezen aan een CSS-variabele die is ingesteld op het widgethostelement (.callflow-widget-host):

Voorbeeld van het matchen van de widget met de donkere kant met gouden accenten:

<div id="callback"

  data-accent="#c8953f"

  data-accent-text="#0b0b09"

  data-bg="#11181d"

  data-text="#f4f4f1"

  data-muted="#a9b0b4"

  data-border-color="rgba(255,255,255,.14)"

  data-radius="0px"

  data-shadow="none"></div>

<script

  src="https://callflowdesk.com/widget/widget.js"

  data-site-key="CF-TWOJ-KLUCZ"

  data-target="#callback"

  data-variant="box">

</script>

Dezelfde variabelen zijn aanwezig in de Shadow DOM via CSS-overerving, dus in plaats van attributen kunt u pure pagina-CSS (blad of <style>):

#moj-kontener {

  --callflow-accent: #b8860b;

  --callflow-radius: 4px;

  --callflow-max-width: 460px;

}

Voorrangsvolgorde: attribuut data-* na elemencie docelowym → atrybut data-* na tagu <script> → zmienna CSS strony → starsze atrybuty data-*-color → wartości domyślne.

Geavanceerd niveau - volledig spectrum van CSS

::part() - Belangrijke formulierelementen hebben attributen part, więc strona może je stylować dowolnym CSS bez ograniczeń Shadow DOM. Dostępne nazwy części:

container, title, subtitle, form, field, label, phone-label, input, phone-input, urgent-field, urgent-checkbox, urgent-reason-label, urgent-reason-input, checkbox, checkbox-input, consent, consent-input, link, privacy-link, button, submit-button, status, close-button, floating-trigger, launch-button, sticky-bar, sticky-copy, action-button, config-error.

.callflow-widget-host::part(submit-button) {

  background: linear-gradient(135deg, #e0b96f, #c8953f);

  text-transform: uppercase;

  letter-spacing: .06em;

}

.callflow-widget-host::part(title) {

  font-weight: 500;

}

data-custom-css - onbewerkte CSS geïnjecteerd in de Shadow DOM na basisstijlen (cascadewinsten, beïnvloedt interne widgetkiezers):

<div id="callback"

  data-custom-css=".cf-panel{border:0;padding:14px} .cf-submit{letter-spacing:.06em}"></div>

data-css-href - Adres van het externe blad dat in de Shadow DOM is geladen. Om veiligheidsredenen worden alleen adressen geaccepteerd https:// oraz ścieżki względne; http://, javascript: i inne schematy są odrzucane.

<script

  src="https://callflowdesk.com/widget/widget.js"

  data-site-key="CF-TWOJ-KLUCZ"

  data-css-href="https://twoja-strona.pl/assets/callflow-theme.css">

</script>

Volgorde van schaduw-DOM-stijlen: basisstijlen → z-blad data-css-href → data-custom-css. Personalizacja jest w pełni opcjonalna i wstecznie kompatybilna — istniejące osadzenia działają bez zmian.

JavaScript-gebeurtenissen

De widget zendt gebeurtenissen uit op het hostelement en geeft deze door aan het document, zodat u bijvoorbeeld na een succesvol rapport een conversie naar het analysesysteem kunt sturen:

document.addEventListener('callflow:submitted', (event) => {

  console.log(event.detail.receiptId);

});



document.addEventListener('callflow:error', (event) => {

  console.warn(event.detail.code);

});

Beschikbare evenementen:

• callflow:open — formularz został otwarty;
• callflow:close — formularz został zamknięty;
• callflow:submitted — zgłoszenie zostało przyjęte (w event.detail.receiptId znajdziesz identyfikator potwierdzenia);
• callflow:error — wysyłka się nie powiodła (w event.detail.code znajdziesz kod błędu).

WordPress-plug-in

CallFlow 1.1.0-plug-in voegt een widget toe aan uw gehele WordPress-site zonder de sjabloon te bewerken. Ondersteunt varianten floating, box, sticky i compact oraz osadzanie formularza w treści przez shortcode.

Vereisten

• WordPress 6.0 of hoger;
• PHP 7.4 of hoger (getest op PHP 7.4 en 8.3);
• sitesleutel Met de sitesleutel CF-… utworzony w aplikacji CallFlow.

Stapsgewijze installatie

1. Download de plug-in - bestand callflow-wordpress-1.1.0.zip znajdziesz w sekcji Downloaden.
2. Installeren in WordPress-dashboard - ga naar Plug-ins → Nieuwe plug-in toevoegen → Plug-in uploaden naar server, wijs het gedownloade ZIP-bestand aan en klik Installerenen na installatie Inschakelen.
3. Configureren - ga naar Instellingen → CallFlow en:
   • plak de sleutel in de doos PUBLIC_SITE_KEY (formaat CF-XXXX-XXXX);
   • selecteren Variant (standaard floating);
   • voer het adres in Privacybeleid van uw site;
   • -markering Schakel de widget globaal in en klik Wijzigingen opslaan.

Insluiten in inhoud (shortcode)

Gebruik de shortcode om een formulier in een bericht of pagina weer te geven:

[callflow variant="box"]

Het gebruik van de shortcode schakelt automatisch de tweede, globale widget op deze subpagina uit - het formulier zal nooit worden gedupliceerd.

Veelvoorkomende problemen

• Sleutel wordt niet opgeslagen - Plug-in valideert formaat: sleutel moet beginnen met CF- i zawierać wyłącznie wielkie litery, cyfry i myślniki. Skopiuj go ponownie z aplikacji, bez spacji.
• De widget verschijnt niet op de pagina - vink veld aan Schakel de widget globaal in is aangevinkt en de sleutel is niet leeg. Als u een cache-plug-in gebruikt (bijvoorbeeld LiteSpeed, WP Super Cache), wis dan de cache nadat u uw instellingen hebt opgeslagen.
• De widget verschijnt twee keer - je hebt ook de plug-in CallFlow voor WooCommerce actief; zie sectie WooCommerce.

WooCommerce-plug-in

CallFlow voor WooCommerce 1.1.0 is een plug-in op maat gemaakt voor winkels - het gebruikt de variant ecommerce z nagłówkiem zachęcającym do pytania o produkt. Wersja 1.1.0 jest publiczną betą przeznaczoną do testów na sklepie stagingowym.

Vereisten

• WordPress 6.0 of hoger, PHP 7.4 of hoger (getest op PHP 7.4 en 8.3);
• actieve plug-in WooCommerce (vereist - zonder deze wordt de widget niet weergegeven);
• sitesleutel Met de sitesleutel CF-… z aplikacji CallFlow.

Stapsgewijze installatie

1. Download de plug-in - bestand callflow-woocommerce-1.1.0.zip z sekcji Downloaden.
2. Installeren — Plug-ins → Nieuwe plug-in toevoegen → Plug-in uploaden naar server, selecteer ZIP, Installeren, Inschakelen.
3. Configureren - ga naar Instellingen → CallFlow WooCommerce en:
   • plakken PUBLIC_SITE_KEY;
   • selecteren Variant: ecommerce (domyślny), floating lub sticky;
   • stel uw eigen in Koptekst formulier (standaard "Heeft u een vraag over het product?");
   • -markering Schakel de winkelwidget in en sla op.

Werkt met de standaard CallFlow-plug-in

Beide plug-ins kunnen tegelijkertijd actief zijn. Wanneer de WooCommerce-widget is ingeschakeld, wordt automatisch de globale widget van de onderliggende plug-in uitgeschakeld, zodat het formulier nooit twee keer wordt weergegeven. Als u het sleutelveld in de WooCommerce-instellingen leeg laat, gebruikt de plug-in de sleutel van de basis-CallFlow-plug-in.

Veelvoorkomende problemen

• De widget verschijnt niet - zorg ervoor dat WooCommerce geïnstalleerd en actief is; de plug-in geeft de widget alleen weer als WooCommerce actief is.
• Twee widgets tegelijk - update beide plug-ins naar versie 1.1.0; oudere versies coördineerden de zichtbaarheid niet. U kunt ook het vinkje bij 'Widget globaal inschakelen' in de onderliggende plug-in uitschakelen.
• Dit is bèta - test de plug-in eerst op een testkopie van de winkel voordat u deze in productie zet.

PrestaShop 8-module

De bètamodule CallFlow 1.1.0 integreert een productiewidget in de voettekst van de PrestaShop-winkel (hook displayFooter). Obsługuje warianty ecommerce, floating i sticky.

Vereisten

• PrestaShop 8.0 of hoger;
• sitesleutel Met de sitesleutel CF-… z aplikacji CallFlow;
• installeer eerst de bètaversie in de staging store.

Stapsgewijze installatie

1. Downloadmodule - bestand callflow-prestashop8-1.1.0.zip z sekcji Downloaden.
2. Installeren op paneel - ga naar Modules → Modulebeheer → Module laden en wijs naar de gedownloade ZIP. U vindt de module in de categorie ‘Advertentie en marketing’.
3. Configureren - klik Configureren voor de CallFlow-module en:
   • plakken PUBLIC_SITE_KEY;
   • selecteren Variant: E-commerce (standaard), Zwevend of Sticky;
   • ingesteld Widgetkop (standaard "Heeft u een vraag over dit product?" - voer uw vraag in het Pools in);
   • specificeer alstublieft adres van privacybeleid opslaan;
   • schakelaar instellen Ingeschakeld in op "Ja" en klik Opslaan.

Veelvoorkomende problemen

• Fout "De CallFlow-sleutel moet beginnen met CF-" - module valideert sleutelformaat; kopieer het vanuit de applicatie zonder spaties.
• Widget verschijnt niet na opslaan - winkelcache wissen (Geavanceerd → Prestaties → Cache wissen) en controleer of de schakelaar Enabled op "Ja" staat.
• Thema roept de voettekst niet op - de widget is verbonden met de hook displayFooter; jeśli Twój motyw go nie renderuje, podepnij moduł do innego hooka w Uiterlijk → Artikelen.

Andere platforms

De volgende integraties zijn technische bètaversies van 1.1.0. Installeer ze eerst in uw testomgeving. In de rubriek vindt u alle pakketten Downloaden.

Drupal 10/11

Ga na het installeren van de module naar Configuratie → Netwerkdiensten → CallFlow, plak de openbare sleutel van de site en selecteer een variant.

Joomla 4/5

Schakel na de installatie de plug-in in Systeem - CallFlow (v Systeem → Plug-ins), plakken PUBLIC_SITE_KEY, wybierz wariant i podaj adres polityki prywatności.

Magento 2 / Adobe Commerce

Module kopiëren naar app/code/CallFlow/Callback, uruchom bin/magento setup:upgrade i skonfiguruj go w Winkels → Configuratie → Algemeen → CallFlow. De module bevat een CSP-whitelist voor het script en de API samael.pl, więc nie musisz ręcznie modyfikować polityki bezpieczeństwa treści.

e107 2.3

Open na de installatie de CallFlow-configuratie en plak de sleutel CF-…, wybierz wariant i włącz widget.

Strapi 4/5

Plug-in biedt openbare podconfiguratie /api/callflow/config (endpoint nie ujawnia żadnych danych konta ani zgłoszeń). Ustaw zmienne środowiskowe CALLFLOW_SITE_KEY oraz opcjonalnie CALLFLOW_VARIANT, a we frontendzie użyj:

import {mountCallFlow} from 'strapi-plugin-callflow/client';

await mountCallFlow();

Shopify

Pakket bevat broncode Thema-app-extensie (app-insluiting voor een zwevende widget en app-blok met een formulier ingebed in de sectie) - dit is geen winkelinstallatieprogramma. Voor de implementatie zijn de Shopify Partner-app en ontwikkelaarswinkel vereist:

shopify app dev

shopify app deploy

Na installatie activeert de verkoper CallFlow in Thema-instellingen → App-insluitingen of voegt een formulierblok toe aan een themasectie.

API voor ontwikkelaars

CallFlow biedt REST API versie 1.2.0 - hetzelfde contract ondersteunt de mobiele app en openbare widgets.

Basisprincipes

• Basis-URL: https://callflowdesk.com/api/v1
• Authenticatie: koptekst Authorization: Bearer <access_token> (JWT). Token uzyskasz przez POST /auth/login, a odświeżysz przez POST /auth/refresh z refresh_token.
• Geen token werkt alleen: /auth/register, /auth/login, /auth/refresh oraz /public/leads.
• Fouten: formaat application/problem+json z polami type, title, status, code, detail, trace_id i (dla walidacji) errors.
• Paginering: vermeldt het rendement next_cursor; kolejną stronę pobierzesz parametrem zapytania cursor.

Auth - Registratie en sessielevenscyclus

Account - Hoofdaccount, subaccounts en statistieken

Bronnen - Websites en contactpakketten

Leads - terugbelverzoeken en hun status

Schema - oproepplanning

Apparaten - push-apparaten

Openbaar - eindpunten voor widgets

Voorbeeld: inloggen

curl -X POST https://callflowdesk.com/api/v1/auth/login \

  -H "Content-Type: application/json" \

  -d '{"email":"jan@firma.pl","password":"TwojeBezpieczneHaslo"}'

Antwoorden 200 zawiera access_token (przekazuj go w nagłówku Authorization: Bearer …), refresh_token, czas życia expires_in (w sekundach) oraz obiekt user. Przykład żądania uwierzytelnionego:

curl https://callflowdesk.com/api/v1/leads?status=new \

  -H "Authorization: Bearer ACCESS_TOKEN"

Voorbeeld: een lead openbaar verzenden

Eindpunt POST /public/leads nie wymaga tokenu — identyfikuje stronę po publicznym kluczu CF-…. Nagłówek Idempotency-Key jest vereist (16-128 tekens, bijvoorbeeld UUID): Als u het verzoek opnieuw probeert met dezelfde sleutel, ontstaat er geen dubbel verzoek.

curl -X POST https://callflowdesk.com/api/v1/public/leads \

  -H "Content-Type: application/json" \

  -H "Idempotency-Key: 4b1f2c62-9e0a-4d7c-8f5e-6a3d2b1c0e9f" \

  -d '{

    "site_public_key": "CF-TWOJ-KLUCZ",

    "phone": "+48601234567",

    "consent": true,

    "language": "pl",

    "widget_variant": "box",

    "source_url": "https://twoja-strona.pl/kontakt",

    "urgent": false,

    "website": ""

  }'

Verplichte velden: site_public_key, phone, consent (musi być true), language i widget_variant. Pole website to honeypot antyspamowy — musi pozostać puste. Odpowiedź 202 zawiera receipt_id, accepted, message_key oraz opcjonalnie queue_position i estimated_callback_at.

Android-applicatie

De CallFlow-applicatie is het commandocentrum voor uw oproepen: hier komen alle rapporten van widgets terecht, hier beheert u pagina's, toetsen en de terugbelkalender. De applicatie verschijnt binnenkort op Google Play - tot die tijd vindt u het installatiepakket in de sectie Downloaden.

Belangrijkste kenmerken

• Oproepwachtrij - nieuwe verzoeken worden automatisch naar het juiste project gestuurd en in de wachtrij geplaatst op basis van werkuren en verwachte gesprekstijd; statussen (nieuw, in uitvoering, afgehandeld, gemist, spam) organiseren het werk.
• Schema - terugbelkalender met automatische planning van de volgende beschikbare afspraak met één druk op de knop.
• Pushmeldingen - elk nieuw rapport activeert onmiddellijk een melding; Je beheert de lijst met geregistreerde apparaten in de instellingen en je kunt de toegang intrekken voor een kwijtgeraakte telefoon.
• Subaccounts - als accounteigenaar (hoofdrol) nodig je collega's (subrol) per e-mail uit en wijs je geselecteerde pagina's toe; ze zien alleen bronnen en rapporten die aan hen zijn toegewezen.
• Gegevensexport - volledige export van accountgegevens (pagina's, rapporten, planning, toestemmingen) naar een JSON-bestand, in overeenstemming met AVG.
• Accountverwijdering - permanente verwijdering van het account met alle gegevens rechtstreeks vanuit de applicatie (vereist wachtwoordbevestiging, en voor Google-accounts - de zinsnede "ACCOUNT VERWIJDEREN"); details in sectie Verwijder uw account.

Problemen oplossen

De widget verschijnt helemaal niet

De meest voorkomende oorzaak is een ongeldige sleutel. Controleer het attribuut data-site-key: klucz musi zaczynać się od CF- i składać się wyłącznie z wielkich liter, cyfr i myślników (bez spacji na początku i końcu). Otwórz konsolę przeglądarki (F12) — widget zgłasza tam problemy z konfiguracją. Upewnij się też, że skrypt jest wklejony przed </body> i że adres src nie został zmieniony.

Widget geeft het bericht "Ongeldige configuratie" weer

De sleutel heeft het juiste formaat, maar is niet actief. Dit gebeurt wanneer een nieuwe sleutel is gegenereerd (rotatie maakt de oude onmiddellijk ongeldig) of de pagina is gearchiveerd. Ga naar de websitegegevens in de applicatie en kopieer actueel sleutel en vervang deze in uw code- of plug-ininstellingen.

Het formulier werkt, maar de applicaties bereiken de applicatie niet

Controleer de sitestatus in de applicatie: alleen actieve sites accepteren applicaties. Een onderbroken of gearchiveerde pagina accepteert geen nieuwe leads. Controleer ook of u geen rapporten bekijkt met een statusfilter of op een subaccount zonder toegang tot deze pagina.

De widget verschijnt twee keer op WordPress met WooCommerce

Je hebt beide plug-ins actief: de basis CallFlow en CallFlow voor WooCommerce. Vanaf versie 1.1.0 schakelt de WooCommerce-plug-in automatisch de Global Base-widget uit - update beide naar 1.1.0. Als het probleem zich blijft voordoen, schakelt u 'Widget globaal inschakelen' uit Instellingen → CallFlow. Onthoud ook die shortcode [callflow] sam wyłącza widget globalny na danej podstronie.

Een winkel met een beperkende CSP blokkeert de widget

Als uw site een Content-Security-Policy-header verzendt, voegt u een domein toe https://samael.pl do dyrektyw script-src (skrypt widgetu) i connect-src (wysyłka zgłoszeń do API). W Magento 2 nie musisz nic robić — nasz moduł zawiera gotową whitelistę CSP.

De widget verzendt geen rapporten op localhost

Dit is opzettelijk: veld source_url zgłoszenia wymaga prawdziwej domeny z TLD (np. .pl, .com). Adresy typu localhost czy 127.0.0.1 nie przechodzą walidacji. Testuj widget na domenie stagingowej lub tymczasowej subdomenie — formularz i wygląd możesz oczywiście podejrzeć lokalnie.

Hoe verander ik de kleuren van widgets zonder de CSS van de pagina te bewerken?

Gebruik Easy-niveauattributen rechtstreeks op de tag <script> (lub kontenerze data-target): data-accent zmienia kolor przewodni, data-bg tło, data-text kolor tekstu, data-radius zaokrąglenia. Pełna lista w sekcji Personalisatie, en kant-en-klare sets erin demogalerij.

Waar kan ik de CF-sleutel van mijn site vinden?

Open in de CallFlow-applicatie "Pakketten en pagina's", selecteer pagina - toets CF-… jest w jej szczegółach razem z gotowym kodem instalacyjnym do skopiowania. Możesz też wysłać sobie instrukcję instalacji e-mailem prosto z aplikacji.

Ik ontvang geen pushmeldingen over nieuwe rapporten

Controleer of de app toestemming heeft voor meldingen in de Android-instellingen en of uw apparaat in de lijst met apparaten in de app staat en niet is ingetrokken. Schakel batterijoptimalisatie voor CallFlow uit als het systeem de applicatie op de achtergrond in de sluimerstand zet.

Ik heb een nieuwe sleutel gegenereerd en de widget werkt niet meer

Sleutelrotatie maakt de vorige onmiddellijk ongeldig - dit is een beveiligingsfunctie. Nadat je een nieuwe sleutel hebt gegenereerd, update je deze op alle plaatsen waar de widget is ingebed: in de websitecode en in de instellingen van elke CMS-plug-in.