Customisation

Vous pouvez customiser 2 paramètres du bouton de contact généré par Symplicy :

• le style de bouton
• le texte affiché dans le bouton

Ajouter le script de customisation

Pour les customiser, il faut attacher un objet SymplicyOptions à la window de la page.

Cet objet accepte 2 propriétés, correspondant aux 2 paramètres de customisation :

• style pour customiser le style
• locales pour customiser le texte

Pour déclarer ces paramètres, vous devez placer un script avant le script principal :

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

Modifier le style

Vous pouvez modifier plusieurs propriétés du bouton, en séparant les paramètres par des virgules :

• padding l’espace entre les bords et le texte
• border les bordures
• borderRadius l’arrondi des contours
• backgroundColor la couleur du bouton
• color la couleur du texte
• fontFamily la police de caractère
• fontSize la taille du texte
• fontWeight la graisse du texte

Si vous souhaitez conserver une de ces valeurs par défaut, il vous suffit d'omettre la propriété. La valeur par défaut s'appliquera.

Exemple

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

Contactez-nous

Modifier le texte

Vous pouvez modifier le texte affiché dans le bouton, en séparant les différentes langues par des virgules :

• en anglais
• fr français
• nl néerlandais
• de allemand
• es espagnol
• it italien
• ...

Symplicy identifiera automatiquement la langue de la page et affichera directement la bonne traduction.

Note : actuellement, les formulaires sont exclusivement en français, anglais et néerlandais.

Exemple

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

Veuillez répondre à quelques questions