1. Créez une nouvelle div
Créez la nouvelle div qui contiendra le widget.
<div id="mywidget" class=”widget”> </div>
2. Adapter la taille de la div
Le widget va automatiquement prendre tout l'espace de la div. Il est donc nécessaire de définir celle-ci.
.widget { width: 700px; height: 500px;
}
3. Ajoutez le script du widget
Afin de construire le script du widget, vous devez vous munir des éléments suivants :
- l'URL du Widget
src=https://v3-widget.leadformance.com/v2/bridge-widget.js
C'est l'URL du widget Bridge V3. Nous vous recommandons d'utiliser toujours la dernière version disponible. Vous retrouverez l'ensemble des notes de version à l'adresse: https://help.leadformance.com/hc/fr/articles/115001766454-Consulter-les-notes-de-version-du-widget
- La cible du Widget
data-target=”#mywidget”
C'est le lien vers l'élément créé à l'étape 1. L'attribut prend comme valeur les mêmes sélecteurs que la fonction `document.querySelector`.
- L'API Key
data-api-key=”your_api_key”
Cette clé vous est fournie par les administrateurs Leadformance. Elle fait partie des credentials nécessaires pour vous identifier à Bridge avec l'api-secret.
- L'API Secret Key
data-api-secret=”your_secret”
Nécessaire pour s'identifier auprès de Bridge V3.
Vous obtenez ainsi le script suivant :
<script src=https://v3-widget.leadformance.com/v1/bridge-widget.js
data-target=”#mywidget”
data-api-key=”your_api_key”
data-api-secret=”your_secret”>
</script>
Pensez-à intégrer ce script à la suite de la div contenant le widget dans le <body>, afin de laisser le widget se lancer avant le script ;)
Exemple d'erreur possible : script intégré dans le <head>. Le script sera généré avant la création de la div, ce qui engendrera une erreur.
Et voilà, vous avez inséré le Widget sur votre site ! N'hésitez pas à consulter les rubriques suivantes pour configurer et customiser l'apparence de votre Widget.
Si vous souhaitez avoir un aperçu du widget avec et sans style CSS, et voir un exemple de code mis en place, vous pouvez consulter: https://widget-demo.leadformance.com/
Commentaires
0 commentaire
Vous devez vous connecter pour laisser un commentaire.