Documentation

La documentation comprend le widget 1.2.0, les plugins CMS 1.1.0 et l'API version 1.2.0. Dernière mise à jour : juillet 2026.

Démarrage rapide

CallFlow est un widget de rappel gratuit avec file d'attente d'appels automatique. Un visiteur de votre site Web laisse un numéro de téléphone et la demande est immédiatement transmise à l'application CallFlow sur votre téléphone. Le démarrage prend quelques minutes et se compose de trois étapes :

1. Créer un compte - dans l'application CallFlow pour Android ou version ultérieure panneau Web. Le compte est gratuit.
2. Ajouter une page - Dans la section « Packages et pages », ajoutez l'adresse de votre site Web et copiez le raccourci commençant par CF-. To publiczny klucz strony (PUBLIC_SITE_KEY) — pozwala wyłącznie wysyłać nowe zgłoszenia, nie daje dostępu do Twojego konta.
3. Coller le script - Placez le code suivant immédiatement avant la balise </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>

Cela suffit. Un bouton flottant apparaîtra sur le site Web et chaque rapport déclenchera une notification push dans l'application.

Widget HTML/JS

Le widget CallFlow 1.2.0 est un script de production pour les pages HTML classiques. Il ne nécessite pas de framework ni de bibliothèques externes. Le formulaire s'exécute dans un Shadow DOM isolé - il n'interfère pas avec le CSS de votre site - et ne peut envoyer de nouvelles requêtes que via l'API publique CallFlow.

Installation de base (Widget flottant)

Coller le script avant </body> — dokładnie tak jak w Démarrage rapide. Variante par défaut floating wyświetla pływający przycisk w rogu ekranu, który otwiera formularz.

Variante intégrée dans le contenu

Si vous souhaitez placer le formulaire à un endroit précis de la page (par exemple sur la sous-page contact), ajoutez un conteneur vide et indiquez-le avec l'attribut 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>

Variantes disponibles

• 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.

Vous pouvez regarder toutes les variantes en direct sur le site Démo du widget.

Table attributaire de configuration complète

Les paramètres d'urgence et de politique de confidentialité sont également récupérés à partir de CallFlow. L'utilisateur du site Web ne peut pas activer une fonctionnalité qui a été désactivée par le propriétaire du compte.

Sécurité et confidentialité

• ne lit pas les données du compte ni la liste des tickets ;
• permet uniquement de créer un ticket ;
• s'effectue via HTTPS ;
• le formulaire contient un pot de miel et nécessite un consentement explicite pour contacter ; Formulaire
• le widget n'enregistre pas de cookies et n'utilise pas de stockage local ;
• est normalisé et revalidé par l'API ; Réponses au format
• a un délai d'attente de 15 secondes et une clé d'idempotence pour se protéger contre les doublons.

Personnalisation de l'apparence

A partir de la version 1.2.0, le widget hérite par défaut de la police du site web (inherit, awaryjnie system-ui), a wygląd można dopasować na dwóch poziomach: Facile (attributs simples) i Avancé (CSS à spectre complet). Des attributs de personnalisation peuvent être placés sur la balise <script> ou sur la cible spécifiée par data-target (atrybut na elemencie docelowym ma pierwszeństwo). Bez tych atrybutów widget wygląda tak jak dotychczas.

Niveau facile - couleurs, dimensions, police

Chaque attribut est facultatif et correspond à une variable CSS définie sur l'élément hôte du widget (.callflow-widget-host):

Exemple de mise en correspondance du widget avec le côté obscur avec des accents dorés :

<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>

Les mêmes variables imprègnent le Shadow DOM via l'héritage CSS, donc au lieu d'attributs, vous pouvez utiliser du CSS de page pure (feuille ou <style>):

#moj-kontener {

  --callflow-accent: #b8860b;

  --callflow-radius: 4px;

  --callflow-max-width: 460px;

}

Ordre de priorité : attribut data-* na elemencie docelowym → atrybut data-* na tagu <script> → zmienna CSS strony → starsze atrybuty data-*-color → wartości domyślne.

Niveau avancé - spectre complet de CSS

::part() - Les éléments de formulaire importants ont des attributs 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 - CSS brut injecté dans le Shadow DOM après les styles de base (la cascade gagne, affecte les sélecteurs de widgets internes) :

<div id="callback"

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

data-css-href - Adresse de la feuille externe chargée dans le Shadow DOM. Pour des raisons de sécurité, seules les adresses sont acceptées 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>

Ordre des styles Shadow DOM : styles de base → feuille z data-css-href → data-custom-css. Personalizacja jest w pełni opcjonalna i wstecznie kompatybilna — istniejące osadzenia działają bez zmian.

Événements JavaScript

Le widget émet des événements sur l'élément hôte et les propage au document, vous pouvez donc, par exemple, envoyer une conversion au système d'analyse après un rapport réussi :

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

  console.log(event.detail.receiptId);

});



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

  console.warn(event.detail.code);

});

Événements disponibles :

• 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).

Plugin WordPress

Le plugin CallFlow 1.1.0 ajoute un widget à l'ensemble de votre site WordPress sans modifier le modèle. Prend en charge les variantes floating, box, sticky i compact oraz osadzanie formularza w treści przez shortcode.

Exigences

• WordPress 6.0 ou version ultérieure ;
• PHP 7.4 ou version ultérieure (testé sur PHP 7.4 et 8.3) ;
• clé du site La clé de site CF-… utworzony w aplikacji CallFlow.

Installation étape par étape

1. Téléchargez le plugin - fichier callflow-wordpress-1.1.0.zip znajdziesz w sekcji Télécharger.
2. Installer dans le tableau de bord WordPress - aller à Plugins → Ajouter un nouveau plugin → Télécharger le plugin sur le serveur, pointez sur le fichier ZIP téléchargé, cliquez sur Installer, et après l'installation Activer.
3. Configurer - aller à Paramètres → CallFlow et :
   • collez la clé dans la boîte PUBLIC_SITE_KEY (format CF-XXXX-XXXX);
   • sélectionner Variante (par défaut floating);
   • saisir l'adresse Politique de confidentialité de votre site ;
   • Activer le widget globalement et cliquez sur Enregistrer les modifications.

Intégration dans le contenu (shortcode)

Pour afficher un formulaire dans une publication ou une page, utilisez le shortcode :

[callflow variant="box"]

L'utilisation du shortcode désactive automatiquement le deuxième widget global sur cette sous-page - le formulaire ne sera jamais dupliqué.

Problèmes courants

• Clé non enregistrée - le plugin valide le format : la clé doit commencer par CF- i zawierać wyłącznie wielkie litery, cyfry i myślniki. Skopiuj go ponownie z aplikacji, bez spacji.
• Le widget n'apparaît pas sur la page - champ de vérification Activer le widget globalement est coché et la clé n'est pas vide. Si vous utilisez un plugin de cache (par exemple LiteSpeed, WP Super Cache), videz le cache après avoir enregistré vos paramètres.
• Le widget apparaît deux fois - vous avez également le plugin CallFlow for WooCommerce actif ; voir la rubrique WooCommerce.

Plugin WooCommerce

CallFlow for WooCommerce 1.1.0 est un plugin conçu pour les magasins - il utilise la variante 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.

Exigences

• WordPress 6.0 ou version ultérieure, PHP 7.4 ou version ultérieure (testé sur PHP 7.4 et 8.3) ;
• plugin actif WooCommerce (obligatoire - sans cela, le widget ne sera pas affiché) ;
• clé du site La clé de site CF-… z aplikacji CallFlow.

Installation étape par étape

1. Téléchargez le plugin - fichier callflow-woocommerce-1.1.0.zip z sekcji Télécharger.
2. Installer — Plugins → Ajouter un nouveau plugin → Télécharger le plugin sur le serveur, sélectionnez ZIP, Installer, Activer.
3. Configurer - aller à Paramètres → CallFlow WooCommerce et :
   • coller PUBLIC_SITE_KEY;
   • sélectionner Variante: ecommerce (domyślny), floating lub sticky;
   • définissez le vôtre En-tête (par défaut « Avez-vous une question sur le produit ? ») ;
   • Activer le widget du magasin et enregistrez.

Fonctionne avec le plugin CallFlow de base

Les deux plugins peuvent être actifs en même temps. Lorsque le widget WooCommerce est activé, il désactive automatiquement le widget global du plugin sous-jacent, de sorte que le formulaire ne s'affichera jamais deux fois. Si vous laissez le champ clé vide dans les paramètres WooCommerce, le plugin utilisera la clé du plugin CallFlow de base.

Problèmes courants

• Le widget n'apparaît pas - assurez-vous que WooCommerce est installé et actif ; le plugin affiche le widget uniquement lorsque WooCommerce est en cours d'exécution.
• Deux widgets à la fois - mettre à jour les deux plugins vers la version 1.1.0 ; les anciennes versions ne coordonnaient pas la visibilité. Vous pouvez également décocher « Activer le widget globalement » dans le plugin sous-jacent.
• Ceci est une version bêta - Testez d'abord le plugin sur une copie intermédiaire du magasin avant de l'activer en production.

Module PrestaShop 8

Le module bêta CallFlow 1.1.0 embarque un widget de production dans le pied de page de la boutique PrestaShop (hook displayFooter). Obsługuje warianty ecommerce, floating i sticky.

Exigences

• PrestaShop 8.0 ou version ultérieure ;
• clé du site La clé de site CF-… z aplikacji CallFlow;
• installez d'abord la version bêta sur le magasin intermédiaire.

Installation étape par étape

1. Télécharger le module - fichier callflow-prestashop8-1.1.0.zip z sekcji Télécharger.
2. Installer sur le panneau - aller à Modules → Gestionnaire de modules → Charger le module et pointez sur le ZIP téléchargé. Vous trouverez le module dans la catégorie "Publicité et marketing".
3. Configurer - cliquez Configurer pour le module CallFlow et : Règlement
   • coller PUBLIC_SITE_KEY;
   • sélectionner Variante: E-commerce (par défaut), Flottant ou Sticky ;
   • ensemble En-tête du widget (par défaut « Vous avez une question sur ce produit ? » - saisissez la vôtre en polonais) ;
   • veuillez préciser adresse de la politique de confidentialité ; Le script
   • régler le commutateur Activé à "Oui" et cliquez sur Enregistrer.

Problèmes courants

• Erreur "La clé CallFlow doit commencer par CF-" - le module valide le format de clé ; copiez-le depuis l'application sans espaces.
• Le widget n'apparaît pas après l'enregistrement - vider le cache du magasin (Avancé → Performances → Vider le cache) et vérifiez que le commutateur Enabled est réglé sur "Yes".
• Le thème n'appelle pas le pied de page - le widget est connecté au hook displayFooter; jeśli Twój motyw go nie renderuje, podepnij moduł do innego hooka w Apparence → Objets.

Autres plateformes

Les intégrations suivantes sont des versions bêta techniques de la version 1.1.0 : veuillez d'abord les installer dans votre environnement de test. Vous trouverez tous les forfaits dans la rubrique Télécharger.

Drupal 10/11

Après avoir installé le module, allez dans Configuration → Services réseau → CallFlow, collez la clé publique du site et sélectionnez une variante.

Joomla 4/5

Après l'installation, activez le plugin Système - CallFlow (v Système → Plugins), coller PUBLIC_SITE_KEY, wybierz wariant i podaj adres polityki prywatności.

Magento 2 / Adobe Commerce

Copier le module vers app/code/CallFlow/Callback, uruchom bin/magento setup:upgrade i skonfiguruj go w Magasins → Configuration → Général → CallFlow. Le module contient une liste blanche CSP pour le script et l'API samael.pl, więc nie musisz ręcznie modyfikować polityki bezpieczeństwa treści.

e107 2.3

Après l'installation, ouvrez la configuration de CallFlow, collez la clé CF-…, wybierz wariant i włącz widget.

Sangle 4/5

fournit une configuration de pod public /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

Le forfait comprend code source Extension d'application thématique (application intégrée pour un widget flottant et bloc d'application avec un formulaire intégré dans la section) - il ne s'agit pas d'un programme d'installation de magasin. Le déploiement nécessite l'application Shopify Partner et la boutique des développeurs :

shopify app dev

shopify app deploy

Après l'installation, le vendeur active CallFlow dans Paramètres du thème → Intégrations d'applications ou ajoute un bloc de formulaire à une section thématique.

API pour les développeurs

CallFlow fournit l'API REST version 1.2.0 : le même contrat alimente l'application mobile et les widgets publics.

Bases

• URL de base : https://callflowdesk.com/api/v1
• Authentification : en-tête Le numéro Authorization: Bearer <access_token> (JWT). Token uzyskasz przez POST /auth/login, a odświeżysz przez POST /auth/refresh z refresh_token.
• Aucun jeton ne fonctionne que : /auth/register, /auth/login, /auth/refresh oraz /public/leads.
• Erreurs : application/problem+json z polami type, title, status, code, detail, trace_id i (dla walidacji) errors.
• Pagination : liste le retour next_cursor; kolejną stronę pobierzesz parametrem zapytania cursor.

Auth - Inscription et cycle de vie de la session

Compte - Compte principal, sous-comptes et statistiques

Sources - Sites Web et packs de contacts

Leads - demandes de rappel et leurs statuts

Calendrier - planification des appels

Appareils - appareils push

Public - points de terminaison pour les widgets

Exemple : connexion

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

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

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

Répondre 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"

Exemple : envoi public d'un prospect

Point de terminaison POST /public/leads nie wymaga tokenu — identyfikuje stronę po publicznym kluczu CF-…. Nagłówek Idempotency-Key jest requis (16-128 caractères, par exemple UUID) : réessayer la demande avec la même clé ne créera pas de demande en double.

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": ""

  }'

Champs obligatoires : 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.

Application Android

L'application CallFlow est le centre de commande de vos appels : tous les rapports des widgets vont ici, vous gérez les pages, les touches et le calendrier de rappel. L'application apparaîtra bientôt sur Google Play - d'ici là, vous trouverez le package d'installation dans la section Télécharger.

Principales caractéristiques

• File d'attente des appels - les nouvelles demandes sont automatiquement envoyées au projet approprié et mises en file d'attente en fonction des heures de travail et du temps de conversation prévu ; les statuts (nouveau, en cours, traité, manqué, spam) organisent le travail.
• Horaire - calendrier de rappel avec planification automatique du prochain rendez-vous disponible d'une seule touche.
• Notifications poussées - chaque nouveau rapport déclenche immédiatement une notification ; Vous gérez la liste des appareils enregistrés dans les paramètres et vous pouvez révoquer l'accès d'un téléphone perdu.
• Sous-comptes - en tant que propriétaire du compte (rôle principal), vous invitez des collègues (sous-rôle) par e-mail et leur attribuez les pages sélectionnées ; ils ne voient que les sources et les rapports qui leur sont attribués.
• Exportation de données - export complet des données du compte (pages, rapports, planning, consentements) vers un fichier JSON, conformément au RGPD.
• Suppression du compte - suppression définitive du compte avec toutes les données directement depuis l'application (nécessite une confirmation du mot de passe, et pour les comptes Google - la phrase « SUPPRIMER LE COMPTE »); détails dans la section Supprimez votre compte.

Dépannage

Le widget ne s'affiche pas du tout

La cause la plus courante est une clé non valide. Vérifiez l'attribut 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.

Le widget affiche le message « Configuration invalide »

La clé est au format correct mais n'est pas active. Cela se produit lorsqu'une nouvelle clé a été générée (la rotation invalide immédiatement l'ancienne) ou que la page a été archivée. Accédez aux détails du site Web dans l'application et copiez actuel et remplacez-la dans les paramètres de votre code ou de votre plugin.

Le formulaire fonctionne, mais les candidatures n'arrivent pas à l'application

Vérifiez l'état du site dans l'application : seuls les sites actifs acceptent les soumissions. Une page suspendue ou archivée n'accepte pas de nouveaux prospects. Vérifiez également que vous ne consultez pas les rapports avec un filtre de statut ou sur un sous-compte sans accès à cette page.

Le widget apparaît deux fois sur WordPress avec WooCommerce

Vous avez les deux plugins actifs : le CallFlow de base et CallFlow for WooCommerce. À partir de la version 1.1.0, le plugin WooCommerce désactive automatiquement le widget de base global - mettez à jour les deux vers la version 1.1.0. Si le problème persiste, décochez "Activer le widget globalement" dans Paramètres → CallFlow. N'oubliez pas non plus ce shortcode [callflow] sam wyłącza widget globalny na danej podstronie.

Un magasin avec un CSP restrictif bloque le widget

Si votre site envoie un en-tête Content-Security-Policy, ajoutez un domaine 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.

Le widget n'envoie pas de rapports sur localhost

Ceci est intentionnel : champ 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.

Comment changer les couleurs du widget sans modifier le CSS de la page ?

Utiliser les attributs du niveau Facile directement sur le 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 Personnalisation, et des ensembles prêts à l'emploi en galerie de démonstration.

Où puis-je trouver la clé CF de mon site ?

Dans l'application CallFlow, ouvrez "Packages and Pages", sélectionnez page - touche 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.

Je ne reçois pas de notifications push concernant les nouveaux rapports

Vérifiez que l'application dispose de l'autorisation pour les notifications dans les paramètres Android et que votre appareil figure dans la liste des appareils de l'application et n'a pas été révoqué. Désactivez l'optimisation de la batterie pour CallFlow si le système met l'application en veille en arrière-plan.

J'ai généré une nouvelle clé et le widget a cessé de fonctionner

La rotation des clés invalide immédiatement la précédente - il s'agit d'une fonctionnalité de sécurité. Après avoir généré une nouvelle clé, mettez-la à jour à tous les endroits où le widget est intégré : dans le code du site Web et dans les paramètres de chaque plugin CMS.