Personalization

You can customize 2 parameters of the contact button generated by Symplicy :

  • Button style
  • The text displayed on button

1 Add customization script

To customize, you have to attach a object SymplicyOptionsto the page window.

This object accepts 2 properties, corresponding to the 2 customization parameters:

  • style to customize the style
  • locales to edit text

To declare these parameters, you must place a script before the main script:

<script>
  window.SymplicyOptions = {
    styles: {
      // style options
    },
    locales: {
      // text options
    }
  };
</script>

2 Modify the style

You can modify several properties of the button, separating the parameters with commas:

  • padding the space between the borders and the text
  • border the borders
  • borderRadius the roundedness of the edges
  • backgroundColor the color of the button
  • color the color of the text
  • fontFamily the font type
  • fontSize the font size
  • fontWeight the font weight

If you wish to keep one of these default values, simply omit the property. The default value will apply.

Example:

<script>
  window.SymplicyOptions = {
    styles: {
      padding: '8px 12px',
      borderRadius: '4px',
      backgroundColor: '#E68A6F',
      color: '#ffffff',
      fontFamily: 'Source Sans Pro',
      fontSize: '14px',
      fontWeight: '700'
    }
  };
</script>

3 Modify the text

You can modify the text displayed in the button by separating the different languages with commas:

  • en English
  • fr French
  • nl Dutch
  • de German
  • es Spanish
  • it Italian
  • …

Symplicy will automatically identify the language of the page and display the correct translation.

 

Note: Currently, forms are only available in French, English, and Dutch.

 

Example:

 

<script>
  window.SymplicyOptions = {
    locales : {
      fr: 'Veuillez répondre à quelques questions',
      en: 'Please answer a few questions',
      nl: 'Beantwoord enkele vragen',
      ...
    }
  };
</script>