Form setup

Installing Symplicy on your website is a 2-step process.

  1. Integrate the script on your website
  2. Define the buttons that will trigger the popup

1 Integrate the script

Integrate the script<head> of the pages where you want to use the Symplicy app.

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

Replace the *UUID* part with the identification code (UIDD) provided to you upon subscription.

 

Example of code with UUID:

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

2 Define the buttons that will trigger the popup

There are 4 ways to communicate to our script which buttons should trigger the popup:

  1. By adding an HTML class to the button
  2. By adding an HTML class to the button container
  3. Via a link
  4. Programmatically

2.1 By adding an HTML class to the button

To launch our contact form by clicking on a button (or a link) on your website, simply add the class js-symplicy-button to it. When the user clicks on this button, our intelligent contact form will open in a popup on your site.

 

You can place this class on any element of your page. However, for accessibility reasons, we recommend placing this class on a buttonor a link a.

You can apply this class to multiple elements on the same page and the contact form will open in all cases.

 

Example with a button:

<button class="js-symplicy-button">My contact button</button>

 

Example with a link:

<a href="#" class="js-symplicy-button">Example with a link</a>

2.2 By adding an HTML class to the button container

To create the Symplicy button(s) on a page, you must apply the js-symplicy-container class to the element that will host the button. The buttons will be automatically created in the chosen locations on your page.

You can apply this class as many times as you want, which will create multiple buttons.

Note: It is possible to customize the style of the buttons created by the script by passing certain parameters. To learn more about this option, please consult the customization page.

Example:

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

2.3 Via a link

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 Programmatically

You can also define Symplicy buttons in Javascript. To do this, you need to use the ‘addButtons’ method of the Symplicy object attached to the Window. This method accepts a parameter which can be:

  • either a DOMString composed of one or more CSS selectors targeting your buttons
  • or an Array containing your buttons (or a NodeList)
  • in the case where there is only one button, it can be passed directly as a parameter

This can be useful if your buttons are not yet in the DOM of the page when the script initializes.

Examples:

<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>