Aangepaste CSS & JavaScript in Eddy AI Chatbot stelt je in staat je eigen code toe te voegen om het uiterlijk of gedrag van de chatbot verder te personaliseren dan de standaard Uiterlijk-instellingen bieden. Je kunt aangepaste stijlen injecteren om het standaard visuele ontwerp van de chatbot te overrulen, en JavaScript toevoegen om aangepaste interactiviteit of eventafhandeling te introduceren. Wijzigingen worden pas toegepast op de live chatbot nadat je op Publiceren hebt geklikt.
Wanneer te gebruiken met aangepaste CSS en JavaScript
- Gebruik Aangepaste CSS wanneer je stijlwijzigingen nodig hebt die niet beschikbaar zijn in het tabblad Uiterlijk — bijvoorbeeld het aanpassen van lettergrootte, randstraal, knoppenstijlen of chatbubbelkleuren.
- Gebruik aangepaste JavaScript wanneer je aangepaste gebeurtenissen moet activeren, integreer de chatbot met tools van derden, of voeg gedrag toe dat reageert op gebruikersacties binnen de chatbot.
Voordat je begint
- Je moet een Eddy AI Chatbot hebben gemaakt met minstens één bron verbonden.
- Bekijk de standaard Appearance-instellingen voordat je aangepaste CSS schrijft — veel veelvoorkomende visuele aanpassingen (kleur, pictogram, positie, afstand) kunnen zonder code worden gedaan.
- Aangepaste code wordt wereldwijd toegepast op de chatbot. Test wijzigingen grondig in de Playground voordat je ze publiceert.
Hoe voeg je aangepaste CSS en JavaScript toe
- Navigeer naar AI Chatbot (
) in de linker navigatiebalk en klik op Aanpassen (Aanpas). - Ga naar het tabblad Custom CSS & JavaScript ().
- Voer je CSS-code in het veld Aangepaste CSS in om de styling van de chatbot aan te passen.
- Voer je JavaScript-code in het veld Aangepaste JavaScript in om aangepaste interactiviteit toe te voegen.
- Klik op Opslaan om je code op te slaan.
- Klik op Publiceren om de wijzigingen toe te passen op je live chatbot.
De chatbot op je website weerspiegelt nu je aangepaste code.
Best practices
- Maak één wijziging tegelijk — voeg één CSS- of JavaScript-wijziging toe en test ze voordat je de volgende toevoegt. Dit maakt het makkelijker om problemen te isoleren als er iets kapot gaat.
- Gebruik de Playground om te previewen voordat je publiceert — sla eerst je wijzigingen op en controleer daarna de Playground om te bevestigen dat de chatbot eruitziet en zich gedraagt zoals verwacht voordat hij live gaat.
- Beperk je CSS-selectors zorgvuldig — gebruik specifieke selectors om chatbot-elementen precies te targeten en voorkom per ongeluk het overschrijven van andere stijlen op je webpagina.
- Houd JavaScript minimaal — gebruik JavaScript alleen voor gedrag dat niet bereikt kan worden via de Uiterlijk-instellingen of standaard chatbotconfiguratie. Overmatige JavaScript kan de laadtijd van chatbots beïnvloeden.
- Geef commentaar op je aangepaste code — voeg reacties toe aan je CSS en JavaScript zodat je team de aanpassingen in de loop van de tijd kan begrijpen en onderhouden.