Installation du formulaire

L’installation du formulaire de Symplicy sur votre site internet se déroule en 2 étapes.

  1. Intégrer le script sur votre site web
  2. Définir les boutons qui ouvriront la popup

1 Intégrer le script

Intégrer le script <head> des pages où vous souhaitez utiliser l’app Symplicy.

<script src="https://casus.symplicy.com/app.js?uuid=*UUID*"><script>

Remplacez la partie *UUID* par le code d’identification (UIDD) qui vous a été fourni lors de votre souscription.

 

Exemple de code avec UUID :

<script src="https://casus.symplicy.com/app.js?uuid=0000-1111-2222-3333"></script>

2 Définir les boutons qui ouvriront la popup

Il y a 4 manières de communiquer à notre script quels boutons doivent déclencher la popup :

  1. En ajoutant une class HTML sur le bouton
  2. En ajoutant une class HTML sur le container du bouton
  3. Via un lien
  4. Programmatiquement

2.1 En ajoutant une class HTML sur le bouton

Pour lancer notre formulaire de contact en cliquant sur un bouton (ou un lien) de votre site internet, il vous suffit de lui ajouter la class js-symplicy-button. Lorsque le justiciable cliquera sur ce bouton, notre formulaire de contact intelligent s’ouvrira en popup sur votre site.

 

Vous pouvez placer cette class sur n’importe quel élément de votre page. Cependant, pour des questions d’accessibilité, nous vous recommandons de placer cette class sur un élément de type bouton button ou lien a.

Vous pouvez appliquer cette class sur plusieurs éléments de la même page, le formulaire de contact s’ouvrira dans tous les cas.

 

Exemple avec un bouton :

<button class="js-symplicy-button">Mon bouton de contact</button>

 

Exemple avec un lien :

<a href="#" class="js-symplicy-button">Exemple avec un lien</a>

2.2 En ajoutant une class HTML sur le container du bouton

Pour que Symplicy crée le ou les bouton(s) sur une page, vous devez appliquer la class js-symplicy-container sur l’élément qui accueillera le bouton. Les boutons seront automatiquement créés aux endroits choisis sur votre page.

Vous pouvez appliquer cette class autant de fois que vous le voulez, cela créera plusieurs boutons.

 

Note : il est possible de customiser le style des boutons créés par le script en lui passant certains paramètres. Pour en savoir plus sur cette option, nous vous invitons à vous consulter la page customisation.

 

Exemple :

<div class="js-symplicy-container"></div>

2.3 Via un lien

Il est possible que vous n’ayez pas accès au code de votre site web (si vous utilisez WordPress, Wix, etc. par exemple). Dans ce cas, vous devez ajouter un lien qui redirige vers https://symplicy.com#symplicy. Notre script empêchera la redirection lorsqu’un utilisateur clique sur ce lien et ouvrira la popup à la place.

2.4 Programmatiquement

Vous pouvez également définir les boutons Symplicy en Javascript. Pour ce faire, vous devez utiliser la méthode ‘addButtons’ de l’objet Symplicy attaché à la Window. Cette méthode accepte un paramètre qui peut être :

  • soit une DOMString composée d’un ou plusieurs sélecteurs CSS ciblant vos boutons
  • soit un Array contenant vos boutons (ou une NodeList)
  • dans le cas où il n’y a qu’un seul bouton, celui-ci peut directement être passé en paramètre

Ceci peut être utile au cas où vos boutons ne sont pas encore dans la DOM de la page quand le script s’initialise.

Exemples :

<script>
  window.Symplicy.addButtons('.symplicy-buttons');
</script>
<script>
  var buttons = document.body.querySelectorAll('.symplicy-button');
  window.Symplicy.addButtons(buttons);
</script>
<script>
  var button = document.body.querySelector('#symplicy-button');
  window.Symplicy.addButtons(button);
</script>