Une version plus récente de ce tutoriel est disponible

SuperSaaS | Tutoriel: Changer l'apparence

Il faut distinguer deux niveaux de personnalisation de l'apparence de votre application. Première section de ce tutoriel: La personnalisation au niveau de votre compte tel que le fuseau horaire et le format de date. Deuxième section de ce tutoriel: La personnalisation de votre agenda. Car il est possible de modifier l'apparence de chaque agenda individuellement comme, par exemple, la couleur des créneaux des rendez-vous.

Paramètres d'apparence

La personnalisation de l'apparence de votre compte

La page pour changer les paramètres pour la personnalisation de l'apparence de votre compte se trouve en cliquant sur ​​"Panneau de configuration" puis sur "Paramètres du compte" dans le menu de droite.

Dans la première section, vous pouvez choisir un autre terme que le terme générique «utilisateur». Par exemple, si vous sélectionnez «étudiant», alors chaque boîte de dialogue, la page d'aide, e-mail ou un message d'erreur se référeront aux étudiants. Si vous choisissez l'option personnalisée, puis entrez un terme au singulier. Il convertit automatiquement au pluriel, le cas échéant. Il connaît la plupart des pluriels en français, mais il n'est pas parfait et peut échouer pour des mots particuliers ou étrangers, de sorte que vous pouvez écraser la pluralisation par défaut en entrant le terme personnalisée de la façon suivante "singulier, pluriel" .

Régler le fuseau horaire sur GMT

La section «Options régionales» s'explique d'elle même. Le réglage du fuseau horaire est important, car il détermine quand les courriers de rappel sont envoyés. Il est également utilisé si vous définissez une option de configuration telle que «ne pas réserver au moins 2 jours à l'avance» dans votre processus de réservation. Le réglage par défaut est basé sur votre pays, mais cela peut ne pas être exact pour les pays avec plusieurs fuseaux horaires. Le système calcule automatiquement l'heure d'été pour votre région. Si vous avez un public international vous pouvez permettre aux utilisateurs de choisir leur propre langue au lieu de celle par défaut que vous avez sélectionnée. Vous pouvez aussi laisser les utilisateurs choisir leur propre fuseau horaire, auquel cas votre date et votre heure et de leur date et leur heure seront toutes les deux affichées à l'écran et dans la confirmation des e-mails. Lors du calcul du décalage horaire le système va automatiquement prendre en compte les différences causées par des périodes d'heure d'été dans votre région et dans celle de votre client.

Dans la section "Disposition" de votre application, vous pouvez changer la taille de la police et les couleurs qui sont utilisées pour le texte, les rubriques, l'arrière page de votre application et plusieurs autres choses. La taille de police normale sur le site est de 11 points. SuperSaaS a été optimisé pour la taille normale, mais certains textes peuvent être trop petits à votre goût, surtout si vous avez des utilisateurs âgés ou handicapés. Le système peut redimensionner les éléments les plus visuels depuis la taille de la police de base que vous choisissez, mais dans les anciens navigateurs ce n'est pas toujours parfait (surtout à un niveau de zoom élevé) donc plusieurs éléments sont maintenus à une taille fixe pour éviter de dégrader la qualité visuelle. En cliquant sur les rectangles colorés un sélecteur de couleur apparaît dans lequel vous pouvez sélectionner une couleur ou entrer un code à six chiffres de couleur HTML.

Dans la section en-tête et pied de page vous pouvez télécharger un logo pour remplacer le logo standard SuperSaaS qui apparaît sur ​​chaque page. Il peut être en 'gif', 'jpg' ou le format "png" et une taille maximum de 70Ko. Il sera placé 12 pixels de haut, avec le bord gauche à 15% de la largeur de l'écran et la transparence est préservée. Vous pouvez également fournir une adresse web où les utilisateurs seront redirigés s'ils cliquent sur votre logo. Les utilisateurs pourront aussi être envoyés à cette adresse si ils cliquent sur le lien se déconnecter en quittant votre agenda en ligne. Vous pouvez également choisir de masquer totalement le logo et le bandeau sous celui-ci en sélectionnant l'option appropriée. Ceci est particulièrement utile si vous voulez exécuter SuperSaaS à l'intérieur d'un cadre (frame) sur un autre site. Plus d'informations sur cette question se trouvent dans le chapitre ‘Intégrer l'agenda en ligne à votre site’.

L'adresse de l'expéditeur 'De:' dans vos e-mails sortant peut être personnalisée en mettant votre propre adresse. Pour être conforme aux standards d'internet et pour permettre d'éviter les spams, une mention dans l'entête du message 'renvoyé-de' ou 'resent-from' sera ajoutée mais sans être visible pour vos utilisateurs. Les liens contenus dans les messages contiennent le nom de domaine 'supersaas.com' à moins que vous ayez opté pour la personnalisation du nom de domaine avec une redirection vers votre propre nom de domaine. La section avancée vous propose un lien vers une page traitant de la personnalisation de l'adresse web (URL) et l'option pour modifier la petite image à côté de l'adresse internet qu'on appelle le favicon. Plus d'informations sont disponibles dans le tutoriel Créer une URL personnaliser. (en anglais).

Quand quelqu'un clique sur le lien 'assistance' tout en haut à droite de l'écran, la page qui s'ouvre affiche des informations en relation avec la page sur laquelle il se trouvait précédemment. Ce que vous entrez dans la page 'Information de contact' sera alors affiché en haut de chaque page d'assistance. Vous pouvez mettre du texte au format HTML dans cette boîte, par exemple vous pouvez insérer une image avec un lien internet. Le texte sera vérifié afin de s'assurer que le HTML est bien correct et pour supprimer les éventuelles balises impropres.

Si vous choisissez d'envoyer automatiquement un message aux nouveaux utilisateurs alors la boîte de texte en bas vous permet de personnaliser le message de cet e-mail. Ce dernier est envoyé en texte brut alors n'utilisez pas le HTML. Vous pouvez choisir si vos nouveaux utilisateurs recevront un e-mail de confirmation lors de leur inscription comme il est expliqué à la page 'Contrôle d'accès' ici.

Onglet Configuration de l'apparence

Paramètres spécifiques de l'apparence de l'agenda en ligne

En cliquant sur le bouton bleu 'Configurer' correspondant à votre agenda en ligne et en choisissant l'onglet 'disposition' vous pouvez changer spécifiquement pour cet agenda son apparence. Cette page s'affichera avec une légère différence suivant qu'il s'agit d'un agenda de 'ressources' ou d'un agenda de 'capacité'

D'abord vous pouvez régler la taille de votre agenda en ligne. Horizontalement l'agenda prendra toute la place disponible dans votre navigateur. Si vous agrandissez ou réduisez la fenêtre de votre navigateur l'agenda s'ajuste automatiquement aux nouvelles dimensions.

En vertical vous pouvez modifier l'échelle de votre agenda. Si la taille en vertical dépasse la taille de la fenêtre du navigateur alors une barre de défilement apparaît à droite de l'écran. Pour la 'vue hebdomadaire' ou la 'vue journalière' deux éléments déterminent la hauteur de l'agenda: combien d'heures sont visibles et la taille correspondant à une heure. En augmentant la taille verticale de l'agenda vous rendrez votre agenda plus lisible surtout si vous avez beaucoup de RDV de courte durée comme par exemple 15 mn chaque RDV. En revanche si vous avez un RDV par jour diminuer l'échelle donnera un meilleur aspect à votre agenda en ligne.

RDV en dehors des heures visibles

Noter bien que les heures de début et de fin de l'agenda peuvent être ajustées différemment des heures d'ouvertures. En général vous paramétrez les heures visibles de manières à ce qu'elles correspondent aux heures d'ouvertures mais cela n'est pas une obligation. Par exemple si vos salles de réunion sont de manières générales utilisées de 9h à 17h mais que parfois elles sont utilisées plus tôt ou plus tard que les heures habituelles, vous ne souhaitez pas pour autant agrandir votre agenda pour des heures habituellement vides. Alors laisser les heures visibles entre 9h et 17h et si l'agenda est utilisé en dehors de ces horaires alors seulement pour cette occasion les heures visibles changeront juste pour cette semaine ou cette journée afin de montrer la réservation toute entière. Dans la 'Vue mensuelle' la taille verticale ne change pas même pour les RDV en dehors des heures visibles, cela rendrait l'agenda illisible, mais vous serez averti si des RDV/réservations sont faites en dehors des heures visibles par le message suivant: ' 1 non visible'.

La section 'Couleurs' fournit un lien vers une page ou vous pouvez changer les couleurs de l'agenda lui même. Les options de couleur dépendent du type d'agenda. Pour un agenda de capacité il y a une couleur par défaut des créneaux. Vous pouvez changer cette couleur pour chaque créneau lors de leur création ou lorsque vous les éditez pour les modifier. Il suffit pour cela de cliquer sur le bouton coloré en bas à droite de la fenêtre lors de la création ou l'édition du créneau. Lorsque le créneau est complet un graphique se superpose sur le créneau (hachures ou points) pour montrer qu'il n'y a plus de place. De même un petit graphique en forme de V sur le ou les créneaux indique à l'utilisateur le ou les créneaux qu'il a réservés.

Pour un agenda de ressources la couleur de la réservation indique quelle ressource est affectée à cette réservation. De même un petit graphique en forme de V sur la réservation indique à l'utilisateur ce qu'il a réservé. Si vos rendez-vous ont une durée et une taille fixe. Votre agenda dessinera le contour de 'cellules' correspondant à ces durée pour faciliter leur sélection lors de la réservation. Vous pouvez choisir à quoi ces 'cellules' peuvent ressembler, rendez-vous sur cette page de démonstration ici. Si vous avez plusieurs ressources alors vous pouvez également choisir quel genre de bouton vous souhaitez voir apparaître dans la fenêtre qui s'ouvre lorsque vous cliquez sur l'agenda. Ainsi vous choisissez entre:

La troisième section détermine les champs qui apparaissent dans les listes, telle que la vue de l'agenda. Seuls les champs qui peuvent réellement être remplis sont listés ici. Vous pouvez ajouter des champs supplémentaires sur l'onglet 'Processus'.

La section suivante détermine la vue par défaut. Ce que voit la personne lors de la première visite sur votre agenda en ligne. Les vues disponibles correspondent aux onglets bleus au dessus de votre calendrier. Vous pouvez cliquer sur chaque onglet et choisir celui que vous préférez. Certaines vues peuvent ne pas être approprié pour votre agenda en ligne. Si par exemple vous utilisez cet agenda en ligne pour louer des maisons de vacances d'une semaine à l'autre, alors la vue journalière vous est inutile. Ainsi, vous pouvez supprimer cette vue en décochant la case à correspondante. Il y a aussi une case à cocher pour cacher la vue mensuelle juste au dessus à droite de votre agenda.

Messages personnalisés

Le reste de la page 'Disposition' ou mise en page est remplie de zones de texte qui vous permettent de personnaliser les messages sur différentes pages et e-mails. Vous pouvez ajouter du code HTML dans ces boîtes, y compris les graphiques, mais notez que cela ne fonctionne que si les graphiques sont disponibles via une URL, c'est à dire les images ne peuvent pas être stockées localement sur ​​votre ordinateur; elles doivent être hébergées sur internet. Vous pouvez télécharger un logo sur notre serveur, comme indiqué dans la section précédente, et ensuite utiliser l'URL de cette image si vous voulez afin de l'insérer ailleurs. Notez que les e-mails sont envoyés en texte brut, il ne faut donc pas ajouter du code HTML dans ces derniers.

Les boîtes de message vous permettent également d'ajouter du script java (JavaScript). Vous pouvez utiliser cette option pour ajouter des fonctions avancées à la page. En cliquant sur le bouton "HTML" une fenêtre apparaît où vous pouvez coller votre code:

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

Vous pouvez également utiliser ceci pour ajouter un code de suivi provenant de Google Analytics afin d'obtenir des statistiques sur les visiteurs de votre agenda en ligne comme leur provenance par exemple.

Messages dynamiques grâce à l' "Auto texte" ou "texte automatique"

Il s'agit de paramètres avancés que vous pouvez parfaitement laisser de côté pour l'instant car ils sont sans grandes influences sur votre agenda en ligne.

Vous pouvez personnaliser les e-mails et les messages d'écran avec du "texte automatique". Des mots 'magiques' peuvent s'insérer dans votre texte. Ces mots 'magiques' s'adaptent au contexte ou aux variables que constituent certains mots comme par exemple le nom de l'utilisateur de l'agenda. Le tableau ci-dessous énumère les mots magiques que vous pouvez utiliser dans les messages de vos e-mail.

Texte automatique pour les messages E-mail
Le mot……sera remplacé par
$nameLe nom de la personne à qui l'e-mail est envoyé, si il est disponible
$loginLe nom de connexion (login) de celui qui a pris le RDV (vide si c'est l'administrateur qui a pris le RDV, ou si il n'y a pas lieu de se connecter pour réserver)
$subjectLe reste de cette ligne sera utilisé en objet de l'e-mail,
il peut contenir d'autres mots magiques
$urlUne adresse web qui renvoie l'utilisateur à la page approprié de l'agenda
$actionDécrit quelle action a déclenché l'envoi de cet e-mail. Par exemple:
'Votre réservation a été $action' → 'Votre réservation a été créée'
$detailsInformation détaillée à propos de la réservation, comme l'heure et l'endroit
$idle sujet ID (identifiant), ceci est particulièrement utile lors de recherches dans l'interface du superviser
$slot_idL'ID (identifiant) du créneau se rapportant au sujet de ce créneau (seulement les agendas de capacité)
$replaceEfface tout le texte généré par le système et le remplace par votre propre texte
$start
$finish
$created
heure de début, heure de fin et date de création de la réservation.
Utiliser $start_time ou $finish_time pour montrer uniquement l'heure
$lengthLa durée de la réservation affichée en H:MM ou JJ:HH:MM
$icalLa réservation sera attachée en pièce jointe à votre l'e-mail comme fichier iCalendar (ics)
$formSi un formulaire est relié à cet objet alors il sera placé en pièce attachée au message sous forme de fichier HTML
$priceLe prix du RDV. Si il s'agit de RDV répétés, c'est le prix du premier qui sera affiché
$field_1
$field_2
Affiche respectivement la valeur du premier et du second champ
$if "action"Le reste de la phrase sera affichée seulement si action correspond à l'action en cours.
Voir plus bas la liste des actions possibles
$title
$location
$quantity
$description
Le titre, le lieu, la description et les quantités réservées (agenda de capacité seulement)
Pour les agendas de ressources $description contient le nom de la ressource

Normalement votre texte personnalisé est ajouté à l'e-mail généré par le système. Cependant, si vous utilisez $replace n'importe où alors votre texte remplacera le message du système entièrement. Les commandes peuvent très bien se suivre à la chaîne. L'extrait de code suivant ne remplacera le titre que quand un nouveau rendez-vous est créé, sinon il laissera le titre par défaut:

$if "created" $title Vous avez un nouveau RDV le $start

Les valeurs permises après le $if sont: "created", "changed", "deleted", "approved", "refunded", "placed_on_the_waiting_list", "changed_on_the_waiting_list", "removed_from_the_waiting_list" or "placed" ("placed" signifie que le RDV est sortie de la liste d'attente pour devenir un RDV normal). Vous pouvez utiliser l'identification de la langue come EN,ES,FR,... pour n'afficher la phrase uniquement que si la personne a sélectionné cette langue dans le calendrier.

Une autre utilisation de texte automatique sert à fournir à vos clients un lien direct vers un écran où ils peuvent modifier leur RDV. Vous pourriez ajouter ce texte au message de votre e-mail:

Pour changer votre RDV/réservation en ligne aller à :
http://www.supersaas.com/schedule/account_name/schedule_name?view=view&id=$id

Si vous utilisez un 'agenda de capacité' vous devez également inclure l'ID du créneau dans l'URL:

http://www.supersaas.com/schedule/account_name/schedule_name/$slot_id?view=view&id=$id

Des messages dynamiques peuvent aussi être affichés, comme celui au dessus de votre agenda en ligne ou celui dans la page d'assistance ou encore celui de la page de connexion pour accéder à votre agenda.

Texte automatique pour afficher des messages
Le mot……sera remplacé par
$if condition {message}Si la condition est remplie, le message entre les accolades sera alors affiché. Voir le tableau à la fin pour les conditions possibles. Le message peut s'étendre sur plusieurs lignes et peut contenir des mots magiques à l'exception d'un autre $if
$loginAffiche le nom de connexion de l'utilisateur qui est actuellement connecté
$nameAffiche le nom complet de l'utilisateur qui est actuellement connecté, si ce nom est bien disponible
$creditAffiche le montant de crédit dont dispose l'utilisateur actuellement connecté
$shopCréer un lien vers votre boutique ou vous pouvez écrire, par exemple, 'Veuillez acheter des crédits dans notre $shop avant de réserver'
$autoNormalement le texte par défaut est remplacé par le votre, mais $auto permet de le réinsérer. Cela est utile pour le texte par défaut au dessus de l'agenda qui peut changer selon que l'utilisateur est autorisé à réserver ou non
$suAffiche le champ du superviseur pour l'utilisateur actuellement connecté, si disponible. Vous pouvez utiliser cela afin d'afficher un message pour un utilisateur en particulier
$idAffiche l'ID (identifiant) de l'objet courant. Il est seulement disponible sur la page de déconnexion et sur la page de remerciement lorsqu'un formulaire est envoyé. Vous pouvez utiliser celui-ci afin de donner à l'utilisateur un numéro de référence unique

Un usage courant des messages de l'affichage dynamique est de permettre d'adapter la langue en fonction des personnes. La condition du $if peut être un code de deux caractères tels que la langue FR, DE, EN... Cela pourrait être utilisé comme suit:

$if EN {Good morning $login}
$if DE {Guten Morgen $login}
$if FR {Bonjour $login}

Une autre utilisation de $if permet d'afficher un message selon que le visiteur s'est inscrit ou pas à votre agenda:

$if out {Veuillez vous inscrire pour accéder à notre agenda}
$if user {Bienvenue $login!}

Il peut également être utilisée pour ajouter du code de suivi pour un annonceur. Notez que vous aurez besoin de passer en mode HTML en cliquant sur le bouton "HTML" avant d'ajouter du code javascript, sinon le code sera affiché littéralement comme du texte:

$if paid {Merci de votre confiance $name.
<script type="text/javascript">
<!--
var google_conversion_id = …

</script>
}

La table ci-dessous les différentes conditions possibles que peut utiliser $if :

Conditions'applique si…
$if user {message}Le message s'affiche si l'utilisateur est connecté
$if out {message}Le message s'affiche si l'utilisateur n'est pas connecté
$if shared {message}Le message s'affiche si l'utilisateur est connecté avec un mot de passe partagé
$if admin {message}Le message s'affiche si l'utilisateur est connecté en tant qu'administrateur ou en tant que super-utilisateur
$if XX {message}Le message s'affiche si la langue actuellement sélectionnée possède un code langue ISO de type XX
$if paid {message}Le message s'affiche quand l'utilisateur a réalisé avec succès le paiement.
Cela ne peut être ajouté uniquement que sur la page de déconnexion.
$if mobile {message}Le message s'affiche seulement dans la version du site pour appareil mobile (smartphone et tablette)
$if desktop {message}Le message s'affiche uniquement sur la version du site pour PC
$if calendar {message}Le message s'affiche uniquement dans certain mode de vue comme la vue journalière, la vue hebdomadaire ou encore la vue mensuelle de votre agenda
$if view {message}Le message s'affiche seulement dans une des vues suivantes. La vue suivant les disponibilités, agenda, jour, semaine ou mois

Chapitre suivant: Intégrer l'agenda en ligne à votre site | Revenir vers Index tutoriel