Intégration de JavaScript : installation

L'intégration JavaScript de CrowdHandler est le moyen le plus rapide et le plus simple d'ajouter une salle d'attente à un site web ; elle présente toutefois certaines limites, qui sont décrites ici. Veuillez les lire avant de configurer l'intégration JavaScript.

Il existe deux façons d'ajouter le script de l'API CrowdHandler à votre site.

Si vous avez accès à votre code HTML et/ou à vos modèles, vous pouvez ajouter le script manuellement.

Si ce n'est pas le cas, ou si vous préférez ne pas vous salir les mains, vous pouvez ajouter le script à l'aide de Google Tag Manager.

Obtenir votre API publique#

Dans les deux cas, vous aurez besoin de votre clé API publique.

Pour obtenir votre clé API publique, connectez-vous à https://admin.crowdhandler.com et accédez à votre compte.

Cliquez sur « API » dans la navigation du compte.

Vous verrez votre clé API publique en haut de l'écran.

Vous pouvez soit cliquer sur le presse-papiers pour copier la clé API publique, soit sélectionner le code et le copier.

Ajouter le script

Insérez la balise de script suivante dans la section de toutes les pages que vous souhaitez protéger.

Replace <ch-public-key> with your Public API key.

<script src="https://wait.crowdhandler.com/js/latest/lite-validator/main.js?id=<ch-public-key>"></script>

Par exemple, si votre clé API publique est 123456abcedf123456abcedf123456abcedf123456abcedf123456abcedf123, votre balise de script sera alors

<script src="https://wait.crowdhandler.com/js/latest/lite-validator/main.js?id=<strong>123456abcedf123456abcedf123456abcedf123456abcedf123456abcedf123</strong>"></script>

Remarque : il est important que ce script soit exécuté dès que possible ; nous vous recommandons donc de l'insérer avant toutes les autres balises de script.

Utilisation de Google Tag

Google Tag Manager est un système de gestion des balises qui facilite l'ajout d'extraits de code HTML/JavaScript à votre site web. Nous avons créé un modèle de balise GTM dédié qui vous aidera à commencer à utiliser CrowdHandler sur votre site sans avoir à modifier le code.

Cette balise permettra d'intégrer CrowdHandler à votre site, ce qui nous permettra de gérer les foules ; elle ne doit être ajoutée qu'une seule fois.

Important: Before you start, please make sure that Google Tag Manager is set up correctly on your website, according to the Google Tag Manager installation guide. Specifically, make sure that the <script> element of your Google Tag Manager container appears early on in the <head> section of your site and the <noscript> element appears at the beginning of the <body> section.

Voici comment installer CrowdHandler sur un site web via Google Tag Manager :

1. Télécharger le

Vous trouverez un modèle au bas de cet article. Téléchargez-le sur votre ordinateur, nous en aurons besoin dans un instant.

2. Créer un nouveau modèle dans Google Tag

Cliquez sur « Modèles » dans le menu de Google Tag Manager

Sélectionnez ensuite « Nouveau » dans le panneau « Modèles de balises ».

3. Importer le modèle de balise

Cliquez sur les points situés en haut à droite de l'interface de Google Tag Manager pour afficher le menu, puis sélectionnez « Importer ».

Accédez ensuite au fichier template.tpl que vous avez téléchargé, puis importez-le.

Cliquez sur « Enregistrer » puis fermez l'éditeur.

Le modèle de balise devrait désormais être disponible dans votre menu des modèles de balises.

4. Ajouter le modèle de balise

Sélectionnez ensuite « Balises » dans le menu de Google Tag Manager, puis cliquez sur « Nouveau ».

Cliquez sur le panneau de configuration des balises et sélectionnez votre nouveau modèle JavaScript CrowdHandler. Vous devrez peut-être faire défiler la page vers le bas pour le voir.

5. Se connecter à

Pour connecter votre site à CrowdHandler, vous devez indiquer votre clé API publique.

Collez-la dans le champ « Clé API publique » du modèle de balise.

Il est important que cette balise se déclenche le plus tôt possible; ouvrez donc les paramètres avancés et attribuez une valeur élevée à la priorité de déclenchement de la balise.

Dans la section « Déclenchement », créez un nouveau déclencheur en cliquant sur la section « Déclenchement », puis sur le symbole « + ».

Vous devrez limiter le déclencheur afin qu'il ne se déclenche que sur votre domaine et votre protocole de production (à moins que vous ne cherchiez explicitement à effectuer des tests sur un environnement de préproduction ou de développement, auquel cas vous devrez vous assurer que ces domaines sont configurés dans CrowdHandler) ; sélectionnez donc « Page View » comme type de déclencheur, choisissez « Ce déclencheur se déclenche sur certaines pages vues » comme condition, puis créez une condition qui correspond le mieux à votre cas d'utilisation.

Par exemple, créez la condition Les domaines commencent par https://my-domain.com pour limiter le déclenchement du déclencheur à https://my-domain.com uniquement.

Donnez un nom à votre déclencheur, puis cliquez sur le bouton « Enregistrer ».

Choisissez maintenant un nom pour votre balise, puis cliquez sur le bouton « Enregistrer ».

Cliquez sur le bouton « Soumettre », puis sélectionnez « Publier » sur l'écran suivant pour publier les modifications.

Et voilà ! Le script CrowdHandler a été ajouté à votre site : nous nous occupons désormais de la foule et vous pouvez vous concentrer sur les ventes !

Modèle.tpl