Přidání CSS nebo JavaScriptu do vašeho rozvrhu

• Zjistěte více o přidávání HTML do textových polí
• Změňte vzhled svého rozvrhu pomocí CSS
• Změňte vzhled svého widgetu pomocí CSS
• Zjistěte více o JavaScriptových fragmentech a o tom, jak fungují
• Naučte se, jak vložit JavaScript pro integraci dynamických funkcí do vašeho rozvrhu
• Přidejte extra možnosti při použití skriptů, jako je automatický text nebo analytický snippet

Přidání HTML do textových polí

• Do pole zprávy pod Nastavení rozvrhu
• Do polí zpráv v každém rozvrhu na stránce Nastavení > Vzhled
• Do pole pro HTML komentáře, které najdete v přizpůsobených formulářích po přechodu na Nastavení > Vzhled
• Do polí zpráv emailů na stránce Nastavení > Vzhled, pokud je HTML povoleno pro emailové zprávy

Změňte vzhled svého rozvrhu pomocí CSS

Pokud chcete přidat specifické styly na určité stránky rozvrhu tak, aby ladily s vaším webem, můžete použít CSS. Stejně jako skripty, CSS lze přidat do každého pole zprávy, které umožňuje HTML. Klikněte na tlačítko < > na panelu nástrojů pole zprávy, abyste otevřeli textové pole zdrojového kódu pro přidání CSS. Na použití CSS v rozvrhu budete potřebovat základní technické znalosti. Existují dva způsoby, jak používat CSS v SuperSaaS: můžete použít inline CSS nebo odkazovat na externí stylový soubor.

Inline CSS

Inline CSS je metoda, která vám umožňuje aplikovat styly přímo na jednotlivé HTML prvky ve vašem rozvrhu. Provádí se to pomocí atributu style v otevíracím tagu HTML prvku. Například, pokud chcete změnit barvu textu v odstavci na zelenou a nastavit velikost písma na 16 pixelů, použili byste inline CSS následovně:

Toto je odstavec se zeleným textem a velikostí písma 16 pixelů.

Inline CSS je skvělé na rychlé změny stylu konkrétního prvku bez ovlivnění zbytku stránky. Avšak, stává se méně praktickým, když potřebujete aplikovat stejný styl na více prvků, protože musíte opakovat stejný kód.

Inline CSS v emailech

SuperSaaS nabízí dva typy emailových formátů: jednoduchý text a HTML. Výchozím nastavením jsou emaily odesílány v jednoduchém textu, což umožňuje pouze základní text. Pokud chcete zahrnout obrázky, HTML nebo aplikovat styly jako CSS, povolte HTML formátování pro emailové zprávy na stránce Nastavení rozvrhu. V emailu musíte použít inline CSS, protože emaily nepodporují stylové listy CSS stejně jako webové stránky. Po povolení HTML formátování pro emaily můžete aplikovat inline CSS, jak je vysvětleno výše.

Použití externího stylového listu

Zatímco inline CSS je užitečné pro malé změny, stává se nepřehledným, pokud máte mnoho CSS, a pak je výhodnější použít externí stylový list. Pro odkazování na externí stylový list je důležité, aby byl stylový list přístupný přes jiný server, protože není možné ukládat CSS soubory přímo v SuperSaaS. Základní struktura pro odkazování na externí stylový list vypadá následovně:

Po použití CSS ve zdrojovém kódu polí zprávy, která umožňují HTML obsah, stiskněte ‚Uložit‘ a navštivte stránku, abyste se ujistili, že CSS bylo správně aplikováno.

Přidání CSS do vašeho widgetu

Můžete také přidat CSS do widgetu rozvrhu, který může být vložen na váš web. Pokud chcete přizpůsobit styl widgetu, můžete buď přidat vlastní CSS, které bude umístěno mezi style tagy v každém rámci, nebo odkazovat na externí stylový list. Mějte však na paměti, že struktura a identifikátory widgetu se mohou měnit s aktualizacemi, takže na ně nespoléhejte.

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

Více informací o přizpůsobení vašeho SuperSaaS widgetu naleznete v naší dokumentaci pro vývojáře.

Použití skriptů v SuperSaaS

JavaScriptové skripty mohou být užitečné pro integraci dynamických funkcí na stránky nebo formuláře rozvrhu, aby vylepšily proces rezervace. Můžete integrovat různé služby nebo funkce, jako je live chat, tlačítka, odpočítávání nebo sledovací skripty pro analytické služby jako Google Analytics nebo Bing.

Například následující fragment přidává vyskakovací tlačítko jako toto , které lze použít k zobrazení dalších informací, když zákazníci rezervují prostřednictvím vaší rezervační stránky.

Jak vložit skript

1. Najděte své pole zprávy: Přejděte na pole zprávy, kam chcete přidat váš JavaScriptový skript. Toto pole zprávy může být na kterémkoli z výše uvedených míst
2. Otevřete textové pole se zdrojovým kódem: Klikněte na tlačítko < > na panelu nástrojů pole zprávy, aby se otevřelo textové pole se zdrojovým kódem
3. Zkopírujte váš skript: Získejte fragment kódu služby nebo funkce, kterou chcete integrovat, například live chat tlačítko pro živou podporu nebo analytickou službu jako Google Analytics
4. Přidejte ho do textového pole a uložte: Vložte fragment kódu do textového pole ve zdrojovém kódu v SuperSaaS a klikněte na uložit. Poté přejděte na spodní část stránky rozvrhu a klikněte na tlačítko uložit změny
5. Testování: Po uložení kódu navštivte stránku, kde jste kód aplikovali, abyste se ujistili, že byl skript správně aplikován. Pokud potřebujete kód na více stránkách, zopakujte proces vložení pro každé vlastní pole zprávy

Extra možnosti v SuperSaaS

Použití auto-textu se skripty

Auto-textové řetězce jsou sada ‚magických slov‘, která se automaticky nahradí něčím jiným při generování zprávy. Auto-textové výrazy jsou užitečné pro e-maily a zprávy na obrazovce. Mohou být ale také použity v HTML ve spojení se skriptem. Na stránce přizpůsobení zpráv na obrazovce najdete všechny auto-textové výrazy, které lze použít s HTML.

Auto-text lze také použít k podmíněnému přidání skriptů. Například, přidání skriptu pouze v případě úspěšné platby. Chcete-li přidat kód do vašeho podmíněného auto-textového výrazu, jednoduše ho vložte dovnitř složených závorek.