CSS of JavaScript toevoegen aan uw agenda

Op deze pagina leest u hoe u berichten op het scherm kunt aanpassen met behulp van HTML, CSS en JavaScript. Met CSS kunt u pagina’s vormgeven, terwijl JavaScript scripts (visuele) functies aan uw website kunnen toevoegen die de inhoud kunnen wijzigen, informatie kunnen registreren en meer.

Lees hoe u HTML toevoegt in tekstvelden
Verander het uiterlijk van de agenda met CSS
Verander het uiterlijk van de widget met CSS
Voeg een JavaScript code snippet toe aan uw agenda
Maak uw agenda interactief door JavaScript in te voegen en leer hoe u dynamische functies integreert
Voeg extra opties toe wanneer u scripts gebruikt, zoals autotekst of een analytics tag (snippet)

Voeg HTML toe in tekstvelden

In SuperSaaS kunnen HTML, CSS en JavaScript alleen worden ingevoegd in tekstvelden die HTML-inhoud toestaan. Er zijn vier plaatsen waar u HTML aan uw tekstveld kunt toevoegen:

In het tekstveld onder Layout instellingen
In de tekstvelden die zich in elke agenda bevinden op de Configureren > Uiterlijk pagina
In het HTML-toelichtingsveld dat te vinden is in formulieren onder het tabje Configureren > Ontwerp
In e-mailberichten op de Configureren > Uiterlijk pagina, als HTML is ingeschakeld voor e-mail

Niet alle accounts zijn ingesteld om JavaScript toe te staan. Als u een gratis account heeft, moet u mogelijk contact opnemen met support om hen te vragen JavaScript op de pagina toe te staan. Het is niet mogelijk om JavaScript aan e-mailberichten toe te voegen.

Pas het uiterlijk van uw agenda aan met CSS

Als u specifieke stijl elementen wilt toevoegen aan bepaalde agendapagina’s dan kunt u CSS gebruiken. Net als scripts kan CSS worden toegevoegd aan elk tekstveld dat HTML toestaat. Klik op de < > knop in de menubalk van het tekstveld om het broncodeveld te openen en uw CSS toe te voegen. U heeft wat basiskennis van CSS en HTML nodig om dit op agenda toe te passen. Er zijn twee manieren om CSS in SuperSaaS te gebruiken.

Inline CSS

Met inline CSS past u de stijl van individuele HTML-elementen binnen uw agendapagina. U voegt de ‘style’ instructie toe binnen de openingstag van een HTML-element. Als u bijvoorbeeld de kleur van de tekst in een alinea naar groen wilt veranderen en de lettergrootte wilt instellen op 16 pixels, zou u inline CSS als volgt gebruiken:


	<p style="color: green; font-size: 16px;"> Dit is een alinea met groene tekst en een lettergrootte van 16 pixels.</p>

Dit is een alinea met groene tekst en een lettergrootte van 16 pixels.

Inline CSS is handig om snel de stijl van een specifiek element te veranderen zonder de rest van de pagina te beïnvloeden. Het wordt echter minder praktisch wanneer u dezelfde stijl op veel elementen wilt toepassen, omdat u dan steeds dezelfde code moet herhalen.

Inline CSS in e-mail

In SuperSaaS kunt u e-mails verzenden in twee soorten opmaak: platte tekst en HTML. Standaard worden e-mails verzonden met platte tekst, oftewel tekst zonder opmaak. Als u afbeeldingen, HTML of stijlen zoals CSS wilt toevoegen, schakelt u HTML-opmaak voor e-mailberichten in onder Layout instellingen. In e-mails moet u inline CSS gebruiken, omdat deze geen CSS-stylesheets ondersteunen zoals webpagina’s dat doen. Nadat u de HTML-opmaak voor e-mail heeft ingeschakeld, kunt u inline CSS toepassen zoals hierboven is uitgelegd.

Een externe stylesheet gebruiken

Hoewel inline CSS nuttig is voor e-mail en voor het aanbrengen van kleine wijzigingen op uw pagina, wordt het onpraktisch als u veel wijzigingen wilt maken in de CSS. Dan heeft het gebruik van een externe CSS-stylesheet de voorkeur. Om een externe stylesheet te koppelen, is het belangrijk dat deze toegankelijk is via een andere server, omdat het niet mogelijk is om CSS-bestanden direct in SuperSaaS op te slaan. De basisstructuur om een externe stylesheet te koppelen ziet er als volgt uit:


	<link rel="stylesheet" href="https://{www.insertyoururl}/css/style.css">

Nadat u CSS heeft toegepast in de broncode van de tekstvelden die HTML-inhoud toestaan drukt u op ‘Opslaan’. Bezoek dan de gewijzigde pagina om te controleren of de CSS juist is toegepast.

CSS toevoegen aan uw widget

U kunt ook CSS toevoegen aan een widget op uw website. Als u de stijl van de widget wilt aanpassen, kunt u uw eigen CSS toevoegen, die tussen de style-tags in elk frame wordt geplaatst, of een externe stylesheet koppelen. Houd er echter rekening mee dat de structuur en opmaak van de widget kunnen wijzigen bij updates.

var supersaas = new SuperSaaS("demo", "Therapist", {"custom_css": "h1 {color:red}"})
var supersaas = new SuperSaaS("demo", "Therapist", {"custom_css": "https://….css"})

Voor meer informatie over het aanpassen van uw SuperSaaS widget, raadpleeg onze developer documentatie.

Scripts gebruiken in SuperSaaS

JavaScript scripts kunnen handig zijn om extra functies te integreren in uw agenda pagina of formulieren om zo het boekingsproces te verbeteren. U kunt verschillende diensten of functies integreren, bijvoorbeeld een live chat, button, een aftelklok, of scripts voor diensten zoals Google Analytics of Bing.

Het volgende stukje code voegt bijvoorbeeld een pop-up knop toe waarmee u klanten extra informatie kunt tonen wanneer ze via uw agendapagina boeken.


	<input onclick="window.open('//static.supersaas.net/img/demo_room.jpg', 'Popup', 'width=400,height=300')" type="button" value="Pop-up">

Een script invoegen

Ga naar het tekstveld: Navigeer naar het tekstveld waar u JavaScript script wilt toevoegen. Het tekstveld kan zich op een van de bovengenoemde locaties bevinden
Open het broncodeveld: Klik op de < > knop in de menubalk van het tekstveld om het broncodeveld te openen
Kopieer uw script: Kopieer de code snippet van de dienst of functie die u wilt integreren, zoals een live chat functie voor live ondersteuning of een webtool zoals Google Analytics
Voeg de code toe aan de broncode: Plak de code snippet in het broncodeveld in SuperSaaS en klik op opslaan. Scroll vervolgens naar de onderkant van de pagina en klik op de knop ‘wijzigingen opslaan’
Test uw script: Ga na het opslaan van de code naar de pagina waar u de snippet hebt toegevoegd om te controleren of het script correct werkt. Als u de code snippet op meerdere pagina’s nodig heeft, herhaalt u bovenstaande stappen voor elk apart tekstveld

Elk tekstveld kan maximaal 3000 tekens bevatten. Als u meer code moet toevoegen, gebruik dan een src tag in uw script om naar een extern HTML-bestand te linken en plaats deze tag in de broncode. Zo kunt u een grote hoeveelheid JavaScript toevoegen zonder het maximaal toegestane aantal tekens te overschrijden. Om te zorgen dat uw pagina snel laadt, is het een goed idee om een defer attribuut aan de src tag toe te voegen.

Extra opties binnen SuperSaaS

Autotekst gebruiken met scripts

Autotekst termen zijn speciale woorden die worden vervangen door iets anders wanneer ze worden gebruikt in een tekst die automatisch wordt gegenereerd. Autotekst is handig om e-mails en standaard teksten op het scherm te personaliseren. U kunt ze ook gebruiken in combinatie met een script. Op de pagina teksten op het scherm aanpassen vindt u een lijst met alle autotekst die met HTML kan worden gebruikt.

Autotekst kan ook worden gebruikt om scripts alleen onder bepaalde voorwaarden uit te voeren op een pagina, bijvoorbeeld alleen als een betaling succesvol is. Om een code snippet aan uw conditionele autotekst toe te voegen, plaatst u deze binnen de accolades, zoals in het voorbeeld hieronder.


	$if paid {Bedankt voor uw betaling, $name <script>…</script>}

Dankzij het conditionele $if zal het script in dit geval alleen worden uitgevoerd op de pagina als iemand heeft betaald. Als de betaling is mislukt of als een beheerder of supergebruiker een afspraak heeft gemaakt zonder te betalen, wordt het script niet uitgevoerd. U kunt autotekst ook gebruiken om een chatknop alleen te tonen wanneer een gebruiker is ingelogd, maar deze over te slaan wanneer een superuser is ingelogd.

Een andere manier om succesvolle boekingen bij te houden

Een andere manier om succesvolle boekingen bij te houden, is om een URL toe te voegen aan het veld op de Configureren > Proces pagina bij het gedeelte Wat gebeurt er nadat de gebruiker een afspraak heeft afgerond?. Uw klanten worden na het boeken doorgestuurd naar de pagina die u heeft ingevuld. U kunt zelf een script toevoegen aan deze pagina om informatie te registeren voor bijvoorbeeld Google Analytics.

U kunt de speciale autotekst termen $name, $id, $price, $slot_id, $email, $lang of $full_name in de URL gebruiken, deze worden automatisch vervangen door de bijbehorende gegevens, zoals loginnaam, ID, prijs, openings-ID, e-mailadres of volledige naam. Op uw eigen server haalt het script deze informatie vervolgens uit de URL halen en verwerken.