Stijlen beheren

U kunt 2 parameters van de contactknop die door Symplicy gegenereerd is, aanpassen:

• de stijl van de knop
• de tekst die in de knop wordt weergegeven

1 Voeg het aanpassingsscript toe

Om aan te passen, moet u een object SymplicyOptions aan de pagina-window koppelen.

Dit object accepteert 2 eigenschappen, die overeenkomen met de 2 aanpassingsparameters:

• style om de stijl aan te passen
• locales om de tekst aan te passen

Om deze eigenschappen aan te geven, moet u een script voor het hoofdscript plaatsen:

<script>
  window.SymplicyOptions = {
    styles: {
      // opties voor stijl
    },
    locales: {
      // opties voor tekst
    }
  };
</script>

2 Pas de stijl aan

U kunt meerdere eigenschappen van de knop aanpassen, waarbij u de parameters scheidt met komma’s:

• padding de ruimte tussen de randen en de tekst
• border de randen
• borderRadius de afgerondheid van de randen
• backgroundColor de kleur van de knop
• color de kleur van de tekst
• fontFamily het lettertype
• fontSize de grootte van de tekst
• fontWeight de dikte van de tekst

Als u een van deze standaardwaarden wilt behouden, kunt u de eigenschap weglaten. De standaardwaarde zal dan worden toegepast.

Voorbeeld:

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

Neem Contact Op

3 Pas de tekst aan

U kunt de tekst die in de knop wordt weergegeven, aanpassen door de verschillende talen te scheiden met komma’s:

• en Engels
• fr Frans
• nl Nederlands
• de Duits
• es Spaans
• it Italiaans
• …

Symplicy identificeert automatisch de taal van de pagina en laat direct de juiste vertaling zien.

Opmerking: Op dit moment zijn de formulieren uitsluitend beschikbaar in het Frans, Engels en Nederlands.

Voorbeeld:

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

Beantwoord enkele vragen