Aller au contenu
click2call.app
Rejoindre la liste d’attente

Guide d’installation

Installer un bouton « Être rappelé » sur son site web

Choisissez le bon emplacement, ajoutez le script vérifié et testez le parcours complet avant de proposer le rappel à vos visiteurs.

Voir le code d’installation Créer mon widget

Guide vérifié sur le widget public v1 · Mis à jour le

Ce que ce guide permet d’installer

Un bouton « Être rappelé » Click2Call collecte le numéro français d’un visiteur et son consentement, puis demande une mise en relation téléphonique. Quand le service est ouvert et qu’un agent actif et vérifié est disponible, Click2Call appelle l’agent puis le visiteur. Les deux personnes sont raccordées lorsqu’elles ont répondu.

Hors horaires ou si aucun agent n’est disponible, le widget propose une demande de rappel. Cette demande reste à traiter par l’équipe : elle ne programme pas automatiquement un appel ultérieur. Pour distinguer ce parcours d’un lien tel: ou d’un appel WebRTC dans le navigateur, consultez la définition du click-to-call.

Les prérequis avant de copier le script

Préparez le parcours complet avant de publier le bouton. Une balise correcte ne suffit pas si l’origine du site ou l’équipe ne sont pas configurées.

  1. 1. Un workspace actif. Sa clé publique commence par c2c_pub_. Elle identifie le workspace mais ne donne pas accès à son administration.
  2. 2. L’origine publiée du site. Ajoutez le schéma, l’hôte et, s’il existe, le port exact. https://exemple.fr et https://www.exemple.fr sont deux origines différentes.
  3. 3. Des horaires et un fuseau. Ils déterminent quand une demande peut lancer un appel immédiat.
  4. 4. Un agent actif et vérifié. Un agent désactivé ou non vérifié ne peut pas recevoir la première branche de l’appel.
  5. 5. Une page de test publiée. Le navigateur doit réellement ouvrir la page depuis une origine autorisée. Un aperçu interne de CMS peut utiliser une autre origine.

La version actuelle accepte les numéros français fixes ou mobiles valides. Le téléphone et le consentement sont obligatoires ; le nom reste facultatif.

HTML · mode flottant

Installer le bouton avec une balise script

Copiez la balise avant la fermeture de </body>, remplacez la clé d’exemple, publiez la page puis ouvrez-la depuis l’origine autorisée. Le script crée automatiquement une seule instance flottante.

Avant </body>
<script
  src="https://cdn.click2call.app/widget/v1.js"
  data-workspace="c2c_pub_VOTRE_CLE"
  data-button-label="Être rappelé maintenant"
  async>
</script>

Intégrer le formulaire dans une zone de la page

Le mode inline affiche le formulaire à l’emplacement du composant. Chargez le script une seule fois, sans data-workspace, puis placez <click2call-widget> dans la zone voulue.

Mode intégré
<script
  src="https://cdn.click2call.app/widget/v1.js"
  async>
</script>

<click2call-widget
  workspace-key="c2c_pub_VOTRE_CLE"
  mode="inline">
</click2call-widget>

N’ajoutez pas data-manual="false". Dans le widget public v1, la présence de l’attribut data-manual suffit à empêcher l’installation automatique, quelle que soit sa valeur textuelle.

Installer le bouton sur WordPress

Click2Call ne fournit pas actuellement de plugin WordPress. L’intégration reste une installation manuelle du script. Utilisez un thème enfant ou une solution de snippets qui injecte du HTML via le hook wp_footer. Ne collez jamais du PHP dans un bloc HTML de l’éditeur.

  1. 1. Sauvegardez le thème ou travaillez dans un thème enfant.
  2. 2. Ajoutez le snippet flottant près de la fermeture de </body> ou via wp_footer.
  3. 3. Purgez les caches du site, du plugin de cache et du CDN.
  4. 4. Vérifiez le code source de la page publiée pour confirmer que le script n’apparaît qu’une fois.

Le hook dépend du thème : vérifiez que celui-ci appelle bien wp_footer(). Référence primaire : documentation du hook wp_footer.

Installer le bouton sur Shopify

Il n’existe pas d’app Shopify Click2Call native. Cette procédure concerne uniquement les pages du storefront auxquelles le thème applique layout/theme.liquid. Elle ne promet rien pour le checkout.

  1. 1. Dupliquez le thème pour conserver une copie de secours.
  2. 2. Dans Online Store → Themes, ouvrez Edit code.
  3. 3. Placez le snippet avant </body> dans layout/theme.liquid.
  4. 4. Enregistrez, prévisualisez puis testez la boutique publiée sur son domaine final.

Une mise à jour du thème peut remplacer des personnalisations. Shopify recommande de dupliquer le thème avant modification : modifier le code d’un thème Shopify.

Installer le bouton sur Webflow

Click2Call n’a pas d’app Webflow native. Pour un bouton présent sur tout le site, ouvrez Site settings → Custom code et placez le snippet dans Footer code. Pour une seule page, utilisez sa zone Before </body>. Enregistrez puis republiez le site : un changement sauvegardé mais non publié n’est pas visible sur le domaine public.

Le code personnalisé dépend du plan Webflow et reste une modification avancée. Référence primaire : code personnalisé dans les balises head et body.

Installer le bouton avec Google Tag Manager

GTM est une option de déploiement, pas un prérequis Click2Call. Créez une balise Custom HTML, collez uniquement le snippet public, puis choisissez un déclencheur limité aux pages concernées. En mode Preview, confirmez que la balise se déclenche une seule fois avant de publier le conteneur.

Une installation directe dans le site reste préférable quand elle est accessible : Google recommande de limiter le JavaScript statique dans les balises personnalisées. Consultez la documentation des balises HTML personnalisées.

Tester le parcours de bout en bout

01

Service ouvert

Saisissez un numéro français de test, cochez le consentement et vérifiez les états : recherche d’un conseiller, agent disponible, téléphone du visiteur puis connexion.

02

Service indisponible

Testez hors horaires ou sans agent disponible. Le widget doit proposer une demande manuelle, visible ensuite dans le dashboard.

03

Clavier et mobile

Parcourez le formulaire au clavier, fermez le panneau flottant avec Échap et vérifiez que le bouton ne masque ni navigation, ni consentement, ni action d’achat.

Personnaliser sans dépendre du Shadow DOM

Le composant accepte dans son HTML le mode floating ou inline, la position left ou right, une couleur principale hexadécimale, un rayon en px ou rem et le libellé du bouton. Ne ciblez pas les éléments internes du Shadow DOM : leur structure n’est pas un contrat public.

Les réglages enregistrés dans le dashboard ne sont pas décrits ici comme automatiquement appliqués au script public. Utilisez le snippet effectivement affiché par le produit et vérifiez le résultat publié. Ce guide ne revendique ni thème sombre, ni traduction automatique, ni modification libre du formulaire.

Adapter une politique de sécurité du contenu

Si le site applique une Content Security Policy, il doit autoriser le chargement du script CDN et les requêtes vers l’API. Les directives ci-dessous sont indicatives : fusionnez-les avec la politique existante au lieu de la remplacer.

Extrait CSP à adapter
script-src https://cdn.click2call.app;
connect-src https://api.click2call.app;

Une politique comportant script-src-elem, des nonces ou des règles plus restrictives demande une adaptation propre au site. Consultez l’équipe responsable de la sécurité avant de modifier une CSP de production.

Résoudre les problèmes courants

SymptômeCause probableCorrection
Le bouton est absentScript non chargé, cache ou page non publiéeInspecter l’onglet Réseau, le code source public et purger les caches.
« Workspace inconnu »Clé publique erronée ou workspace inactifRecopier la clé c2c_pub_… depuis le dashboard.
« Cette origine n’est pas autorisée »Schéma, sous-domaine ou port différentAjouter l’origine exacte, sans chemin, puis retester la page publiée.
Deux boutons apparaissentScript installé dans deux emplacementsContrôler thème, page, plugin de snippets et GTM, puis conserver une seule installation.
Le numéro est refuséNuméro non français, invalide ou type non acceptéTester un numéro français fixe ou mobile valide.
Le formulaire différé apparaîtHors horaires ou aucun agent disponibleVérifier le fuseau, les plages, puis le statut actif et vérifié des agents.
Le mode inline est videScript absent ou composant mal placéCharger le script une fois et placer le composant dans le contenu rendu.
La requête API est bloquéeCSP ou contrôle d’origineInspecter la console, connect-src et l’origine du workspace.
GTM ou Webflow ne change rienVersion non publiéeValider en Preview, puis publier le conteneur ou le site.

Consentement, confidentialité et mesure

Le widget transmet le numéro, le nom facultatif, le consentement, l’origine et la page source. Informez le visiteur de la finalité et reliez votre politique de confidentialité. La case de consentement n’est pas précochée. Pour le détail des protections, consultez la page sécurité et confidentialité.

Les événements navigateur click2call:requested, click2call:status, click2call:connected, click2call:completed et click2call:error permettent de mesurer le parcours. N’envoyez ni numéro, ni nom, ni identifiant d’appel dans votre outil analytics. Un événement navigateur ne remplace pas un webhook signé pour une automatisation serveur.

Checklist avant publication

  • ✓ Une seule instance du script et du composant.
  • ✓ Origines avec et sans www ajoutées seulement si elles servent réellement le widget.
  • ✓ Agent actif et vérifié, horaires et fuseau contrôlés.
  • ✓ Test réel desktop, mobile et clavier.
  • ✓ Parcours immédiat et demande manuelle vérifiés séparément.
  • ✓ Aucun numéro, email, nom ou identifiant dans les captures et l’analytics.

Pour comprendre l’ordre des deux branches, consultez le fonctionnement de Click2Call. Pour choisir le format et voir la présentation du composant, ouvrez la page widget de rappel téléphonique, puis rejoignez la liste d’attente.

Configurer mon bouton de rappel Lire la documentation technique

Questions fréquentes

Installer sans promettre ce que le produit ne fait pas.

La clé publique peut-elle apparaître dans le code du site ?

Oui. La clé c2c_pub_… identifie le workspace pour les routes publiques du widget. Elle ne donne pas accès à l’administration. L’origine HTTP est contrôlée pour chaque demande.

Click2Call rappelle-t-il automatiquement plus tard ?

Non. Hors horaires ou sans agent disponible, le formulaire crée une demande que l’équipe doit traiter manuellement. Aucun appel futur n’est automatiquement planifié.

Existe-t-il un plugin WordPress ou une app Shopify ?

Pas dans la version actuelle. Les procédures de ce guide ajoutent le script public au site ou au storefront ; elles ne constituent pas une intégration native.

Quels numéros les visiteurs peuvent-ils saisir ?

La version actuelle accepte les numéros français fixes ou mobiles valides. Le consentement explicite est requis pour envoyer la demande.