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>

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>