Tilføj CSS eller JavaScript til din kalender

• Lær mere om at tilføje HTML i tekstfelter
• Ændre udseendet på din kalender med CSS
• Skift udseendet på din widget med CSS
• Få mere at vide om JavaScript snippets og hvordan de virker
• Lær a indsætte JavaScript for at integrere dynamiske funktioner i din online kalender
• Tilføj ekstra muligheder, når du bruger scripts, såsom automatisk tekst eller et uddrag til en analyse

Tilføj HTML i tekstfelter

• I beskedfeltet under Layout opsætning (som du finder i højre side af dit SuperSaaS kontrolpanel)
• I beskedfelterne i hver kalender på Konfigurer > Layout fanebladet
• I HTML kommentarfeltet, som kan findes i brugerdefinerede formularer ved at gå til Konfigurer > Design
• I email boksene vedrørende meddelelser via Konfigurer > Layout side, hvis HTML er aktiveret for email beskeder

Skift udseende på din kalender via CSS

Hvis du vil tilføje bestemte stilarter til bestemte kalendere for at matche din hjemmeside, for eksempel, kan du bruge CSS. Ligesom scripts kan CSS tilføjes til hver beskedboks, der tillader HTML. Klik på < > knappen i værktøjslinjen i meddelelsesboksen for at åbne tekstfeltet for kildekode, og for at tilføje din CSS. Du skal bruge noget grundlæggende teknisk forståelse for at anvende dette til din kalender. Der er to måder at bruge CSS i SuperSaaS: du kan bruge inline CSS, eller du kan linke et eksternt stylesheet.

Inline CSS

Inline CSS er en metode, der giver dig mulighed for at anvende stilarter direkte på individuelle HTML elementer inden for din kalender. Dette gøres ved at bruge style attributten i åbningstagget for et HTML element. For eksempel, hvis du vil ændre farven på teksten i et afsnit til grøn og indstille skriftstørrelsen til 16 pixels, vil du bruge inline CSS som følger:

Dette er et afsnit med grøn tekst og en skriftstørrelse på 16 pixels.

Inline CSS er fantastisk til hurtigt at ændre stilen på et bestemt element uden at påvirke resten af siden. Det bliver dog mindre praktisk, når du skal anvende den samme stil på mange elementer, da du skal gentage den samme kode hver gang.

Inline CSS i email

SuperSaaS tilbyder to typer email formater: Almindelig tekst og HTML. Som standard sendes emails i almindelig tekst, hvilket kun giver mulighed for grundlæggende tekst. Hvis du vil inkludere billeder, HTML eller anvende styling som CSS, skal du aktivere HTML formatering for emailmeddelelser på Layout opsætning siden. I email skal du bruge indbygget CSS, fordi emails ikke understøtter CSS stilark, som websider gør. Når du har aktiveret HTML formatering for email, kan du anvende inline CSS som forklaret ovenfor.

Brug af et eksternt stylesheet

Selvom inline CSS er nyttig til små ændringer, bliver det uhåndterligt, hvis du har meget CSS, og så bliver det at foretrække at bruge et eksternt CSS typografiark. For at linke til et eksternt stylesheet er det vigtigt, at stylesheetet er tilgængeligt via en anden server, da det ikke er muligt at gemme CSS filer direkte i SuperSaaS. Den grundlæggende struktur for at linke til et separat CSS typografiark ser ud som følger:

Efter at have anvendt CSS i kildekoden for meddelelsesfelterne, der tillader HTML indhold, skal du trykke på ‘Gem’ og besøge siden for at sikre, at CSS’en er blevet anvendt korrekt.

Tilføjelse af CSS til din widget

Du kan også tilføje CSS til en tidsplan widget som kan integreres på din hjemmeside. Hvis du gerne vil tilpasse stilen af widgetten, kan du enten tilføje din egen CSS, som placeres mellem typografitags i hver ramme (frame), eller linke til et eksternt typografiark. Husk dog, at widget strukturen eller at en eller flere identifikatorer kan ændre sig, efterhånden som vi foretager opdateringer, så stol ikke på, at de forbliver de samme.

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

For mere information om tilpasning af din SuperSaaS widget, se vores udvikler dokumentation.

Brug af scripts i SuperSaaS

JavaScript scripts kan være praktiske til at integrere dynamiske funktioner i dine tidsplansider eller formularer for at forbedre bookingprocessen. Du kan integrere forskellige tjenester eller funktioner, såsom: Live chat, knapper, nedtællinger eller sporingsscripts til analysetjenester som Google Analytics eller Bing.

For eksempel tilføjer følgende uddrag en pop op knap som denne som kan bruges til at vise yderligere information, når kunder bestiller via din bookingside.

Sådan indsætter du et script

1. Find din beskedboks: Naviger til den beskedboks, hvor du vil tilføje dit JavaScript script. Denne beskedboks kan være på en af de steder, der er nævnt ovenfor
2. Åbn kildekodens tekstfelt: Klik på < > knappen på værktøjslinjen i beskedboksen for at åbne kildekodens tekstfelt
3. Kopiér dit script: Hent kodestykket for den tjeneste eller funktion, du ønsker at integrere, eksempelvis live support eller en analysetjeneste som såsom Google Analytics
4. Føj det til kildekodetekstfeltet og gem: Indsæt kodestykket i kildekodetekstfeltet i SuperSaaS, og klik på Gem. Rul derefter til bunden af siden for layout og klik på knappen: Gem ændringer
5. Test: Når du har gemt koden, skal du besøge siden, hvor du anvendte kodestykket for at sikre, at scriptet anvendes korrekt. Hvis du har brug for kodestykket på flere sider, skal du gentage indsættelsesprocessen for hver tilpasset beskedboks

Ekstra muligheder i SuperSaaS

Brug af autotekst med scripts

Auto tekststrenge er et sæt ‘magiske ord’, der automatisk erstattes af noget andet, når beskeden genereres. Auto tekstudsagn er praktisk til emails og meddelelser på skærmen. De kan dog også bruges i HTML i kombination med et script. Via tilpasse beskeder på skærmen kan du finde alle de auto tekstudsagn, der kan bruges med HTML.

Autotekst kan også bruges til betinget tilføjelse af scripts. For eksempel kun at tilføje et script, hvis en betaling er vellykket. For at tilføje et kodestykke til din betingede autotekst erklæring skal du blot tilføje det inden for de krøllede parenteser.