Installation

The installation of Symplicy on website happens in two steps.

  1. Add script to your website
  2. Configure the buttons that open popup

Add script

Add the following script between each tag of the pages<head> where you want to use the Symplicy app

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

Replace the part *UUID* with the identification code (UIDD) that was provided to you when you subscribed.

Code example with UUID

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

Determine the buttons that open the popup

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

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

By adding an HTML class on the button

To trigger our contact form by clicking on a button (or link) on your website, you just have to add the class js-symplicy-button. When the litigant clicks on this button, our form will open in popup on your site.

You can place this class on any element of your page. However, for accessibility reasons, we recommend that you place this class on an element of type button button or link a.

You can apply this class on several elements of the same page, the contact form will open in all cases.

Example with a button

<button class="js-symplicy-button">Contact</button>

Example with a link

<a href="#" class="js-symplicy-button">Link</a>

By adding an HTML class to the button container.

In order for Symplicy to create the button(s) on a sheet, you should apply the class js-symplicy-container on the element that will welcome the button. The buttons will be automatically created on the places choosen on your sheet.
You can apply that class as many times as you want, this will create several buttons.

Note :It is possible to customize the style of the buttons created by the script by passing certain parameters to it. To learn more about this option, we invite you to consult the page customisation.

Example

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

Via a link

It is possible that you do not have access to the code of your website (if you use Wordpress, Wix, etc. for example). In this case, you must add a link that redirects to https://symplicy.com#symplicy. Our script will prevent the redirection when a user clicks on this link and will open the popup instead.

Programmatically

You can also set the Symplicy’s buttons in Javascript. You must use the method ‘addButtons’ 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
  • either an Array containing your buttons (or a NodeList)
  • if there is only one button, it can be directly passed in parameter

This can be useful in case 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>
Message

Can't find what you are looking for ?

A piece of advice, a problem ? Contact us info@symplicy.com