Super que vous ayez construit votre interface de chat. Regardons-le en action sur votre site Web.

Jetons d’abord un coup d’œil à 3 types de sorties d’interface de chat.

• Widget de discussion sur le site Web

Il s'agit de l'interface de discussion la plus couramment utilisée, où vous pouvez voir un lanceur de discussion sous la forme d'une bulle sur le côté gauche ou droit d'un site Web.

• Interface de discussion intégrée à la page Web

L'interface de discussion intégrée est ne pas le widget que vous voyez dans le coin droit ou gauche du site Web. L'interface de discussion intégrée est implémentée sous forme d'iframe dans votre page Web. Il n'a pas de lanceur de widgets ni de fenêtre contextuelle. Cela semble faire partie de votre page. 

L'interface de chat intégrée a différents cas d'utilisation comme le remplacement des formulaires de contact, rendre votre site Web interactif, etc.

• Landing page

Il s'agit de la page Web dédiée créée pour l'interface de chat. Vous pouvez partager la page de destination via les réseaux sociaux ou créer un code QR/une URL courte

La page de destination a différents cas d'utilisation comme les campagnes publicitaires, les publications sur les réseaux sociaux, les cartes de visite, les campagnes par e-mail, la page d'inscription, etc.

Accédez à un onglet spécifique sur 👈 côté gauche de cette page pour obtenir les étapes d’installation détaillées pour votre type de site Web.

S'il vous plaît atteindre les  support@weconnect.chat pour toute question.

Implémenter un widget de chat sur un site Web à l'aide du code Javascript

Il existe différentes manières d'implémenter le widget WeConnect.chat sur votre site Web. Vous pouvez ajouter le widget sur votre site Web directement, via le plugin wordpress WeConnect.chat ou un autre fournisseur externe (Google Tag Manager, Shopify, etc.)

Les étapes ci-dessous permettent d'installer le widget de chat directement sur le site Web.

Vérifiez d'abord la conception du widget dans Builder-> Design -> Widget pour vous assurer qu'il est comme vous l'aimez et positionné au bon endroit.

1. Accédez à « Interface de discussion » dans la barre de navigation de gauche.
2. Ouvrez votre « Interface de chat » pour accéder au « Builder »
3. Depuis Builder, rendez-vous à la 4ème étape « Déployer »
4. Allez dans « Installer le widget » et copiez le code disponible. 
5. Insérez l'extrait de script de code copié dans la page de votre site Web avant de fermer étiqueter 
6. Publiez vos modifications pour voir le widget de chat sur votre site Web
7. Visitez votre site Web sur le navigateur et vous pouvez voir que le widget de chat est désormais visible sur votre site Web.

Toutes les pages du site : 

Implémentez l'extrait dans l'en-tête avant la fermeture baliser l'ensemble du site.

Page spécifique du site :

Implémentez l'extrait dans l'en-tête avant la fermeture balise d’une page spécifique.

Intégrer le widget de chat sur une page Web

Vérifiez d'abord la sortie intégrée dans Builder-> Design-> Embed pour vous assurer que c'est comme vous l'aimez.

Important: L'interface de discussion intégrée est ne pas le widget que vous voyez dans le coin droit ou gauche du site Web. L'interface de discussion intégrée est implémentée sous forme d'iframe dans votre page Web. Il n'a pas de lanceur de widgets ni de fenêtre contextuelle. Cela semble faire partie de votre page. Pour implémenter le widget allez dans l'onglet : Widget Implementation Guide

L'interface de chat intégrée a différents cas d'utilisation comme le remplacement des formulaires de contact, rendre votre site Web interactif, etc.

Vous pouvez intégrer une iframe n’importe où sur votre site Web.

1. Accédez à « Interface de discussion » dans la barre de navigation de gauche.
2. Ouvrez votre « Interface de chat » pour accéder au « Builder »
3. Depuis Builder, rendez-vous à la 4ème étape « Déployer »
4. Allez dans « Installer le widget » et faites défiler vers le bas pour voir les étapes à suivre pour « Intégrer sur une page Web »
5. Copiez le code iframe donné
6. Collez le code iframe n'importe où sur votre page Web pour afficher une interface de discussion

Conseil: Selon vos besoins, vous pouvez ajuster la hauteur et la largeur de l'interface de discussion intégrée en ajustant les valeurs adaptées à votre page Web.

Ressources Web :
Il existe des tutoriels étonnants sur la façon d'intégrer des iframes dans votre site Web.

Tutoriel WordPress Elementor 

Tutoriel Shopify Iframe
Tutoriel Squarespace Iframe
Tutoriel Wix Iframe 

Tutoriel iframe Weebly

Partager l'interface de chat en tant que page de destination

Vérifiez d'abord le résultat de la page de destination dans Builder-> Design-> Landingpage / ou prévisualisez le chat pour vous assurer qu'il correspond à ce que vous aimez.

La page de destination a différents cas d'utilisation comme les campagnes publicitaires, les publications sur les réseaux sociaux, les cartes de visite, les campagnes par e-mail, la page d'inscription, etc.

1. Accédez à « Interface de discussion » dans la barre de navigation de gauche.
2. Ouvrez votre « Interface de chat » pour accéder au « Builder »
3. Depuis Builder, rendez-vous à la 4ème étape « Déployer »
4. Accédez à « Partager la page de destination » 
5. Copiez l'URL de la page de destination pour la partager publiquement

Réseaux sociaux

Partagez la page de destination via les réseaux sociaux

Cliquez sur votre chaîne préférée et partagez-la là

QR Code ou URL courte

Créer un QR code de votre page de destination ou faites-en un URL courte vous pouvez suivre.

Vous pouvez implanter le code QR sur les supports print (dépliants publicitaires, cartes de visite, pages immobilières, etc.). Vous pouvez utiliser l'URL courte dans les campagnes par e-mail

Implémenter un widget de chat sur un site Web WordPress à l'aide d'un plugin

1. Accédez à « Interface de discussion » dans la barre de navigation de gauche.
2. Ouvrez votre « Interface de chat » pour accéder au « Builder »
3. Depuis Builder, rendez-vous à la 4ème étape « Déployer »
4. Allez dans « Installer le widget » et faites défiler vers le bas pour voir les étapes à suivre pour « Installer le widget sur un site Web WordPress »

ÉTAPE 1 : Téléchargez le plugin wordpress WeConnect.chat : 

Accédez au répertoire du plugin dans WP admin et recherchez Weconnect.chat ou téléchargez le plugin ici pour l'installer. https://wordpress.org/plugins/weconnect/

ÉTAPE 2 : Activer le plugin :
Accédez au répertoire des plugins dans l'administrateur WP et recherchez Weconnect.chat, cliquez sur "Activer"

ÉTAPE 3 : Ajoutez l'extrait javascript au plugin WeConnect.chat

1. Allez dans Plugins -> Plugins installés
   2. Recherchez Weconnect.chat
2. Aller aux paramètres
3. Copiez l'extrait de code ci-dessous
4. Collez le code dans « Chatbot Snippet » dans les paramètres WordPress et appliquez les paramètres de la page.
5. Enregistrer les paramètres
6. Hourra! Le widget de chat est visible sur le site Web

Étapes d'installation de l'application

• Comment installer l'application de bureau sur Microsoft  Windows OS
• Comment installer l'application de bureau sur Apple Macintosh OS
• Comment installer Application mobile  

Installez l'interface de chat dans votre application mobile

Vous pouvez installer l'interface de chat n'importe où en utilisant un lien unique. En utilisant les vues Web dans les applications mobiles, vous pouvez ajouter votre interface de discussion à votre application mobile. 

1. Installez une dépendance WebView dans votre projet d'application mobile. 
2. Accédez à « Interface de discussion » dans la barre de navigation de gauche.
3. Ouvrez votre « Interface de chat » pour accéder au « Builder »
4. Depuis Builder, rendez-vous à la 4ème étape « Déployer »
5. Accédez à « Partager la page de destination » 
6. Copiez l'URL de la page de destination à installer en tant que vue Web

• Vues Web dans les applications IOS

• Vues Web sous Android

Par exemple :

1. Si vous utilisez réagir natif, utilisez la commande « npm installreact-native-webview.
2. Transmettez l'URL de l'interface de chat à afficher dans l'application mobile
3. Pour afficher la sortie de la page de destination, utilisez l'URL de la page de destination comme celle-ci -> https://app.weconnect.chat/chat/atterrissage?botId={Votre identifiant de bot}
4. Pour afficher la sortie du widget, utilisez l'URL de la page de destination comme celle-ci -> https://app.weconnect.chat/chat/un widget?botId={Votre identifiant de bot}
5. Implémentez un bouton tactile CTA sur l'interface utilisateur de l'application mobile qui ouvrira la vue Web en un clic.

Implémenter le widget de chat sur le site Web Wix 

Les étapes ci-dessous permettent d'installer le widget de chat directement sur le site Web de Wix.

Vérifiez d'abord la conception du widget dans Builder-> Design -> Widget pour vous assurer qu'il est comme vous l'aimez et positionné au bon endroit.

1. Accédez à « Interface de discussion » dans la barre de navigation de gauche.
2. Ouvrez votre « Interface de chat » pour accéder au « Builder »
3. Depuis Builder, rendez-vous à la 4ème étape « Déployer »
4. Allez dans « Installer le widget » et copiez le code disponible. 

Vous devez souscrire au forfait premium de Wix pour ajouter l'extrait de code du chatbot. Il doit être ajouté sous Paramètres > Paramètres avancés > Suivi et analyses. Vous pouvez trouver le instructions de Wix pour le même.

Implémenter le widget de chat sur le site Web Shopify 

Les étapes ci-dessous permettent d'installer le widget de chat directement sur le site Web Shopify.

Vérifiez d'abord la conception du widget dans Builder-> Design -> Widget pour vous assurer qu'il est comme vous l'aimez et positionné au bon endroit.

1. Accédez à « Interface de discussion » dans la barre de navigation de gauche.
2. Ouvrez votre « Interface de chat » pour accéder au « Builder »
3. Depuis Builder, rendez-vous à la 4ème étape « Déployer »
4. Allez dans « Installer le widget » et copiez le code disponible.

Étapes Shopify :

1. Connectez-vous à l'administrateur Shopify
2. Modifier le code : sélectionnez votre Boutique en ligne. Cliquez sur Themes. Sélectionner Modifier le code du Actions menu.
3. Insérer un extrait de code :

   Cliquez sur sections annuaire. Trouver le fichier en-tête.liquide et collez l'extrait de code juste avant la fermeture de entête étiqueter. Depuis en-tête.liquide est chargé sur chaque page de votre site Shopify, le chatbot apparaîtra sur chaque page. Cliquez sur Épargnez.

   Vous pouvez coller l'extrait de code sur n'importe quel autre modèle liquide. Mais gardez à l’esprit que le chatbot n’apparaîtra que si ce modèle liquide particulier est chargé.

4. Aperçu : votre site Web est maintenant prêt à afficher le widget de chat

Remarque : Si vous ne trouvez pas un seul fichier header.liquid, vous devriez pouvoir voir un fichier theme.liquid. L'ajout de l'extrait de code fonctionnera également.

Implémenter le widget de chat sur le site Web Squarespace 

Les étapes ci-dessous permettent d'installer le widget de chat directement sur le site Web Squarespace.

Vérifiez d'abord la conception du widget dans Builder-> Design -> Widget pour vous assurer qu'il est comme vous l'aimez et positionné au bon endroit.

1. Accédez à « Interface de discussion » dans la barre de navigation de gauche.
2. Ouvrez votre « Interface de chat » pour accéder au « Builder »
3. Depuis Builder, rendez-vous à la 4ème étape « Déployer »
4. Allez dans « Installer le widget » et copiez le code disponible.

Étapes Squarespace :

1. Connectez-vous à Squarespace
2. Sélectionnez votre site
3. Aller aux paramètres
4. Sélectionnez Paramètres avancés
5. Sélectionnez l'injection de code
6. Collez l'extrait de code copié depuis WeConnect.chat dans la section En-tête et cliquez sur Enregistrer
7. Prêt : votre site Web est maintenant prêt à afficher le widget de chat

Implémenter le widget de chat sur le site Web Weebly 

Les étapes ci-dessous permettent d'installer le widget de chat directement sur le site Web Weebly.

Vérifiez d'abord la conception du widget dans Builder-> Design -> Widget pour vous assurer qu'il est comme vous l'aimez et positionné au bon endroit.

1. Accédez à « Interface de discussion » dans la barre de navigation de gauche.
2. Ouvrez votre « Interface de chat » pour accéder au « Builder »
3. Depuis Builder, rendez-vous à la 4ème étape « Déployer »
4. Allez dans « Installer le widget » et copiez le code disponible.

Étapes Weebly :

1. Connectez-vous à Weebly
2. Cliquez sur modifier pour votre site Web
3. Code intégré : insérez le « code intégré » dans la page Web
4. Modifier le HTML : cliquez sur le conteneur de code intégré pour l'ouvrir et cliquez sur "Modifier le HTML personnalisé"
5. Extrait de code : collez l'extrait de code du script du widget WeConnect.chat, cliquez à l'extérieur de la zone d'édition pour enregistrer
6. Prêt : votre site Web est maintenant prêt avec le widget de chat

Implémenter le widget de chat sur le site Web Bigcommerce 

Les étapes ci-dessous permettent d'installer le widget de chat directement sur le site Web Bigcommerce.

Vérifiez d'abord la conception du widget dans Builder-> Design -> Widget pour vous assurer qu'il est comme vous l'aimez et positionné au bon endroit.

1. Accédez à « Interface de discussion » dans la barre de navigation de gauche.
2. Ouvrez votre « Interface de chat » pour accéder au « Builder »
3. Depuis Builder, rendez-vous à la 4ème étape « Déployer »
4. Allez dans « Installer le widget » et copiez le code disponible.

Étapes du grand commerce :

1. Connectez-vous à Bigcommerce
2. Sélectionnez une vitrine
3. Accédez aux scripts de pied de page
4. Inertez l'extrait de code du widget WeConnect.chat et cliquez sur Enregistrer
5. Votre site Web est maintenant prêt à afficher le widget de chat

Implémenter le widget de chat sur le site Web Tumblr 

Les étapes ci-dessous permettent d'installer le widget de chat directement sur le site Web Tumblr.

Vérifiez d'abord la conception du widget dans Builder-> Design -> Widget pour vous assurer qu'il est comme vous l'aimez et positionné au bon endroit.

1. Accédez à « Interface de discussion » dans la barre de navigation de gauche.
2. Ouvrez votre « Interface de chat » pour accéder au « Builder »
3. Depuis Builder, rendez-vous à la 4ème étape « Déployer »
4. Allez dans « Installer le widget » et copiez le code disponible.

Étapes du grand commerce :

1. Connectez-vous à Tumblr
2. Accédez au tableau de bord Tumblr
3. Cliquez sur l'icône du compte en haut à droite. Puis clique Modifier l'apparence
4. Cliquez sur « Modifier le thème » pour voir le code HTML de votre site tumblr
5. Accédez au code HTML en mode édition et collez l'extrait de code du widget WeConnect.chat juste avant étiqueter.
6. Votre site Tumblr est maintenant prêt avec le widget de chat

Pour afficher le widget de chat sur la version mobile de votre site Tumblr :

1. Cliquez sur options avancées sous Modifier le thème.
2. Désactiver Utiliser le thème mobile par défaut et cliquez sur Épargnez.

Remarque : N'oubliez pas de mettre à jour à nouveau l'extrait de code conformément aux étapes ci-dessus si vous apportez des modifications au thème de votre site Web Tumblr.

Implémenter le widget de chat sur le site Web à l'aide de GTM

Google Tag Manager (GTM) permet d'ajouter/gérer facilement des extraits HTML ou Javascript à votre site Web. 

Il y a plusieurs avantages à utiliser GTM pour ajouter l’extrait de code de votre chatbot. Vous bénéficiez d'une plateforme de gestion centralisée de tous les extraits de votre site. Il est plus facile de gérer plusieurs chatbots à l'aide de leur interface et vous pouvez même spécifier où et comment ces chatbots doivent être lancés.

GTM fonctionne via un système de conteneurs, de balises et de déclencheurs.

Tag: Une balise est l'extrait de code que vous ajoutez à votre site.

Récipient: Un conteneur contient essentiellement toutes les balises que vous avez ajoutées à votre site Web. Lorsqu'un nouveau conteneur est créé, vous obtenez un code de conteneur de GTM. Ce sera le seul extrait de code que vous ajouterez directement à votre site Web. Tout le reste se passe dans GTM.

Déclencheurs: Un déclencheur peut être n’importe quelle action sur votre site Web. Par exemple, quelqu'un clique sur un lien sortant, télécharge un fichier, visite une certaine page, etc. Chaque balise doit être associée à un déclencheur, sinon la balise ne fonctionnera pas.

Étapes pour GTM :

1. Connectez-vous à votre compte GTM, créez-en un nouveau si vous ne l'avez pas activé  tagmanager.google.com
2. Configurer le conteneur : donnez un nom à votre conteneur. De préférence, vous pouvez donner votre nom de domaine. Choisissez « Web » et cliquez sur Créer.
3. Ensuite, vous devrez accepter les conditions et services GTM et votre code de conteneur vous sera affiché. Il comportera deux parties et il y aura des instructions spécifiques sur l'endroit où cela doit être ajouté. Si vous utilisez WordPress, vous pouvez utiliser un plugin pour faire ça.
4. Extrait de conteneur GTM : nous ajoutons ici l'extrait de conteneur pour coder un site créé en HTML natif.
5. Créer une nouvelle balise : sous Tags, créer New
6. Type de balise : Dans le but d'ajouter le code de l'extrait du widget de chat, nous utiliserons le HTML personnalisé option.
7. Extrait de widget de chat : dans votre balise Google HTML personnalisée, collez l'extrait de script du widget de chat de votre interface de chat à partir de WeConnect.chat à partir de "Builder - Déployer - Installer le widget - Copier l'extrait de script"
8. Ajout d'un déclencheur : un déclencheur doit être ajouté à la balise pour déterminer quand et où le widget de chat apparaîtra sur votre site Web. Vous trouverez la possibilité d’ajouter le déclencheur en bas.
9.  Il y a beaucoup de déclenche disponible en GTM. Ici, nous utiliserons le déclencheur Toutes les pages. Cela signifie que la balise actuelle sera déclenchée sur toutes les pages de votre site. Vous pouvez créer un nouveau déclencheur en utilisant le bouton « + » dans le coin.

   Une fois le déclencheur ajouté, donnez un nom à votre tag et cliquez sur Épargnez.

10. Publier : toutes les modifications que vous avez apportées à l'intérieur de votre conteneur ne seront mises en ligne qu'une fois que vous les aurez publiées. Pour l'instant, il est uniquement en mode brouillon. Cliquer sur Soumettre procéder.
11. Les modifications que vous apportez à votre conteneur sont enregistrées sous forme de versions. Donnez un nom à votre version et cliquez sur Publier.
12. Prêt : votre site Web est maintenant prêt à afficher le widget de chat

Remarque : Accédez à votre site Web pour voir si le chatbot fonctionne sur toutes les pages. Assurez-vous que le code du conteneur GTM est ajouté sur toutes les pages. Les balises ne fonctionneront que sur les pages sur lesquelles le code du conteneur a été ajouté.

Conseils supplémentaires:

Vous pouvez utiliser GTM pour personnaliser la façon dont le bot apparaît sur votre site à l'aide de déclencheurs. Voici quelques exemples.

• Vous pouvez déclencher le chatbot en fonction de la quantité de défilement de l'utilisateur sur la page Web à l'aide du Déclencheur de défilement.

• Vous pouvez déclencher le chatbot lorsqu'un lien spécial est cliqué à l'aide du Cliquez sur Déclencheur.

• Le Vue de la page déclencheur, vous pouvez déclencher différents chatbots sur différentes pages. Créez des balises pour chaque chatbot et définissez le déclencheur Page View en conséquence.

• Vous pouvez choisir d'afficher l'intégralité du widget après un certain temps en utilisant le Déclencheur de minuterie.

• Si vous souhaitez lancer le bot en fonction d'éléments dynamiques qui apparaissent sur votre page Web, vous pouvez utiliser le Déclencheur de visibilité des éléments.