Personalization

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

• Button style
• The text displayed on button

Add the customization script

To customize them, you have to attach a SymplicyOptions object to the page window

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

• style To custom styling
• locales To edit text

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

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

Edit style

You can change several properties of the button, by separating them with commas :

• padding space between border and content
• border borders
• borderRadius corner rounding
• backgroundColor button color
• color font color
• fontFamily font character
• fontSize font size
• fontWeight font weight

If you wish to keep one of these defaults, 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>

Contact us

Edit text

You can change 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 display the default website language

Currently, forms are only available in English, French and Dutch

Example

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

Please answer to the following questions