Ajoutez du CSS ou du JavaScript à votre agenda

• Découvrez davantage sur l’ajout de HTML dans des champs de texte
• Changez l’aspect de votre agenda avec CSS
• Changez l’apparence de votre widget avec CSS
• Découvrez davantage sur les extraits de JavaScript et leur fonctionnement
• Apprenez comment insérer JavaScript pour intégrer des fonctionnalités dynamiques dans votre agenda
• Ajouter des options supplémentaires lorsque vous utilisez des scripts, tel que du texte automatique ou un extrait d’analyse

Ajoutez du HTML dans les champs de texte

• Dans la zone de message ci-dessous Paramètres
• Dans les zones de message situées dans chaque agenda sur la page Configurer > Aspect
• Dans la boîte de commentaire HTML, que vous pouvez trouver dans les formulaires personnalisés en vous rendant à Configurer > Design
• Dans les zones de message des courriels sur la page Configurer > Aspect si le HTML est activé pour les messages e-mail

Modifiez l’apparence de votre agenda avec CSS

Si vous souhaitez ajouter des styles spécifiques à certaines pages de votre agenda pour les harmoniser avec votre site web, vous pouvez utiliser le CSS. Tout comme les scripts, le CSS peut être ajouté à chaque boîte de message qui accepte le HTML. Cliquez sur le < > le bouton dans la barre d’outils de la boîte de message pour ouvrir le champ de texte du code source et ajouter votre CSS. Vous aurez besoin de connaissances techniques de base pour l’appliquer à votre agenda. Il existe deux manières d’utiliser le CSS sur SuperSaaS : vous pouvez utiliser du CSS en ligne, ou vous pouvez lier une feuille de style externe.

CSS en ligne

Le CSS en ligne est une méthode qui vous permet d’appliquer des styles directement aux éléments HTML individuels de votre agenda. Cela se réalise en utilisant l’attribut style dans la balise ouvrante d’un élément HTML. Par exemple, si vous souhaitez modifier la couleur du texte d’un paragraphe en vert et ajuster la taille de la police à 16 pixels, vous devriez utiliser le CSS en ligne comme suit :

Ce paragraphe présente un texte vert avec une taille de police de 16 pixels.

L’utilisation du CSS en ligne est idéale pour modifier rapidement le style d’un élément spécifique sans impacter le reste de la page. Toutefois, cette méthode devient moins pratique lorsque vous devez appliquer le même style à plusieurs éléments, car il faut répéter le même code à chaque fois.

CSS intégré dans les e-mails

SuperSaaS propose deux types de formats d’email : texte brut et HTML. Par défaut, les emails sont envoyés en texte brut, ce qui ne permet que du texte de base. Si vous souhaitez inclure des images, du HTML ou appliquer un style comme le CSS, activez le formatage HTML pour les messages d’email sur la page Paramètres. Dans vos emails, vous devez utiliser du CSS en ligne, car les emails ne prennent pas en charge les feuilles de style CSS comme le font les pages web. Une fois que vous avez activé le formatage HTML pour les emails, vous pouvez appliquer du CSS en ligne comme expliqué précédemment.

Utilisation d’une feuille de style externe

Bien que le CSS en ligne soit pratique pour de petits ajustements, il devient encombrant lorsque vous avez beaucoup de CSS ; dès lors, l’utilisation d’une feuille de style CSS externe est préférable. Pour lier à une feuille de style externe, il est crucial que celle-ci soit accessible via un autre serveur, car il n’est pas possible de stocker des fichiers CSS directement dans SuperSaaS. La structure de base pour lier à une feuille de style CSS séparée se présente comme suit :

Après avoir intégré le CSS dans le code source des boîtes de message qui acceptent le contenu HTML, cliquez sur « Enregistrer » et consultez la page pour vérifier que le CSS a été appliqué correctement.

Ajout de CSS à votre widget

Vous pouvez également ajouter du CSS à un agenda widget qui peut être intégré à votre site web. Si vous souhaitez personnaliser le style du widget, vous pouvez ajouter votre propre CSS, qui sera placé entre les balises de style dans chaque cadre, ou lier à une feuille de style externe. Toutefois, gardez à l’esprit que la structure du widget et les identifiants peuvent changer au fur et à mesure que nous effectuons des mises à jour, donc ne comptez pas sur leur permanence.

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

Pour plus d’informations sur la personnalisation de votre widget SuperSaaS, consultez notre documentation pour développeurs.

Utilisation de scripts dans SuperSaaS

Les scripts Java sont pratiques pour intégrer des fonctionnalités dynamiques dans vos pages d’agenda ou formulaires afin d’améliorer le processus de réservation. Vous pouvez intégrer divers services ou fonctions, tels que le chat en direct, des boutons, des compte à rebours ou des scripts de suivi pour des services d’analyse tels que Google Analytics ou Bing.

Par exemple, le morceau de code suivant ajoute un bouton pop-up comme celui-ci qui peut être utilisé pour afficher des informations supplémentaires lorsque les clients prennent rendez-vous via votre page d’agenda.

Comment insérer un script

1. Trouvez votre boîte de messages : Naviguez jusqu’à la boîte de message où vous souhaitez ajouter votre script Java. Cette boîte de message peut se trouver dans l’un des emplacements mentionnés précédemment.
2. Ouvrez le champ de texte du code source : Cliquez sur le < > bouton dans la barre d’outils de la boîte de message pour ouvrir le champ de texte du code source
3. Copiez votre script : Récupérez le fragment de code du service ou de la fonction que vous souhaitez intégrer, tel qu’un bouton chat en direct pour un support en direct ou un service d’analyse tel que Google Analytics
4. Ajoutez-le au champ de texte du code source et enregistrez : Collez le fragment de code dans le champ de texte du code source sur SuperSaaS et cliquez sur enregistrer. Ensuite, faites défiler jusqu’à la fin de la page de mise en page et cliquez sur le bouton enregistrer les modifications.
5. Test en cours : Après avoir enregistré le code, visitez la page où vous avez appliqué l’extrait de code pour vous assurer que le script est correctement mis en œuvre. Si vous avez besoin de l’extrait sur plusieurs pages, répétez le processus d’insertion pour chaque boîte de message personnalisée

Options supplémentaires dans SuperSaaS

Utilisation de scripts avec texte automatique

Les chaînes de texte automatique sont un ensemble de ’mots magiques’ qui sont automatiquement remplacés par autre chose lors de la génération du message. Les instructions de texte automatique sont pratiques pour les courriels et les messages à l’écran. Cependant, elles peuvent également être utilisées dans le HTML en combinaison avec un script. Sur la page personnalisation des messages à l’écran vous pouvez trouver toutes les déclarations de texte automatique utilisables avec HTML.

L’auto-texte peut également être utilisé pour ajouter des scripts de manière conditionnelle. Par exemple, pour intégrer un script uniquement si un paiement est réussi. Pour ajouter un extrait de code à votre instruction auto-texte conditionnelle, insérez-le simplement à l’intérieur des accolades.