L’Éditeur de texte enrichi et le BBcode

Last Updated janvier 2, 2024

Aperçu général

L'Éditeur de texte enrichi vous permet de concevoir le texte dans une bulle ou un ShoutOut. Ajoutez de l'emphase, de l'individualisation, la personnalisation des couleurs, des images, des vidéos, des hyperliens, et bien plus encore !

L'Éditeur de texte enrichi a été remplacé par un Éditeur WYSIWYG pour les ShoutOuts dans la nouvelle version de l'Éditeur WalkMe. En savoir plus sur l' Éditeur WYSIWYG pour les ShoutOuts.

Après la création de votre déployable WalkMe, retournez au menu Options pour modifier l'apparence et le comportement de cet élément individuel. Cliquez sur l'élément (étape ou ShoutOut) pour le modifier et l'Éditeur de texte se trouve dans l'onglet Interaction de ce menu spécifique de paramètres des déployables.

Limitations :

Lorsque vous appuyez sur Entrée dans l'Éditeur de texte enrichi, les balises div sont automatiquement ajoutées au BBcode. Pour éviter que des balises de div redondantes soient ajoutées et outrepasse potentiellement le CSS, utilisez l'écran de modification du BBCode afin d'écrire le texte, plutôt que de le saisir dans la boîte d'aperçu (l'Éditeur de texte enrichi d'un menu de sélection de bulle ShoutOut ou Smart Walk-Thru).

Cas d'utilisation

Certains exemples de l'utilisation de l'Éditeur de texte enrichi comprennent :

Ajouter une vidéo promotionnelle à un ShoutOut pour promouvoir un nouveau produit ;
Concevoir une bulle comme message d'erreur ;
Souhaiter la bienvenue à un utilisateur qui revient sur votre site en utilisant son nom ;
Donner aux utilisateurs les options pour commencer d'autres Smart Walk-Thrus directement dans le texte de la bulle ;
Modifier les modèles avancés à partir de la Design Gallery.

Conseil

Pour modifier la couleur du texte, la police et la conception des bulles, ouvrez l'onglet Personnaliser la bulle à partir de la barre d'administration.

Comment ça marche

L'Éditeur de texte enrichi permet d'appliquer le BBCode pour modifier les choses comme la taille de la police, la couleur, le style et ajouter des hyperliens, une vidéo, des images ou untexte dynamique. L'utilisation des outils dans le système d'exploitation en temps réel appliquera ce BBCode. Vous pouvez également saisir la vue de la source pour écrire vous-même dans le BBCode ou pour ouvrir la console CSS, pour plus d'options de modification.

La mise en page de l'Éditeur de texte enrichi

L'Éditeur de texte enrichi est divisé en 4 sections :

1. les champs de titre de la bulle et de description sur la gauche
2. la prévisualisation de la bulle sur la droite

Il existe deux modes pour prévisualiser la bulle :
- Visuel : cette option est par défaut. Vous visualiserez un texte BBCode dans la bulle. Le CSS personnalisé est pris en considération.
- Source : utilisez cette option pour voir ce qui se passe dans les coulisses.

3. les fonctionnalités de l'Éditeur de texte enrichi en haut
4. la console de personnalisation du CSS Modifiez les modèles avancés et crééz le vôtre ! Sélectionnez un élément dans l'Aperçu pour trouver la ligne pertinente dans le CSS.

Options de personnalisation

Vous trouverez ci-dessous une liste des options de personnalisation :

Police :
Pour utiliser les formats de personnalisation de la police, surlignez le texte souhaité et cliquez sur l'icône associée.

En caractères gras
En italique
Souligné
Couleur de la police
Taille de la police
Alignement du texte

Insérer :

Texte dynamique
Lien aux éléments WalkMe
- Ajoutez un lien qui lance un élément WalkMe (Walk-Thru/Smart Walk-Thru/Resource/Survey) lorsqu'un utilisateur clique dessus. Lorsque l'utilisateur final clique sur le contenu WalkMe que vous avez relié, le contenu d'origine avec lequel il a interagi précédemment se fermera.
Image
- Saisissez l'URL d'image (les images doivent être hébergées en ligne avant d'être insérées). Les images que WalkMe utilise pour les clients sont stockées dans les serveurs Amazon S3 ;
- La largeur et la hauteur de l'image est ajustée automatiquement à la taille de la bulle ou du ShoutOut, gardant les proportions de l'image d'origine ;
- Vous pouvez ajuster la largeur et la hauteur de l'image, le cas échéant, en double-cliquant sur l'image à modifier ;
- Vous pouvez supprimer l'image en cliquant sur l'icône de la corbeille à côté de l'URL de l'image ou en la supprimant à l'aide de la touche retour arrière ou en la supprimant lorsque vous modifiez le texte dans l'Éditeur de texte.
Lien
- Saisir l'URL
Vidéo
- Les services d'hébergement pris en charge comprennent les liens YouTube, Vimeo, Wistia, Ustream et Vidyard.
- Saisissez l'URL de la vidéo dans la plateforme de vidéo correspondante. Les vidéos peuvent être lues à partir de n'importe quelle plateforme tant qu'elles sont au format MP4 à l'aide d'un iFrame (voir le BBCode dans le tableau ci-dessous). Saisissez la largeur et la hauteur si nécessaire.
iFrame

Veuillez noter :

Les émojis ne sont pas pris en charge.

BBCode

Les boutons dans l'Éditeur de texte enrichi vous permettent de formater le texte. Lorsque vous surlignez le texte, WalkMe applique le BBCode au texte. Si vous souhaitez voir le BBCode inséré à l'aide de l'Éditeur de texte enrichi, vérifiez la vue de la source.

Si vous souhaitez ajouter le BBCode au lieu d'utiliser les fonctionnalités WalkMe, vous pouvez trouver des exemples de BBCode dans le tableau ci-dessous.

FONCTIONNALITÉ	BBCode
Texte en caractères gras	[b]text[/b]
Texte en italique	[i]text[/i]
Texte souligné	[u]text[/u]
Couleur de la police	[color=#hex_color]Texte[/color]
Taille de la police	[size=size_in_px]Texte[/size]
Insérer une image	[img]img_URL[/img] Avec la largeur et la hauteur : [img=widthxheight]img_[/]URL, par [img=40x24]exemple :img_URL[/img]
Insérer un lien	ouvert dans l'onglet actuel : [url=URL_address target="_self"]text[/url] ouvert dans un nouvel onglet : [url=URL_address target="_blank"]texte[/url]
Insérer une vidéo	[youtube]youtube_video_id[/youtube] *Pour vous assurer qu'une vidéo démarre automatiquement, ajoutez autoplay="1" dans la parenthèse ouvrante du BBCode : [youtube height="" width="" autoplay="1"]XXXXX[/youtube] [vimeo]vimeo_video_id[/vimeo] [wistia]wistia_video_id[/wistia] [html5video]video_URL[/html5video] [ustream]ustream_video_id[/ustream] [vidyard]vidyard_video_id[/vidyard] Avec la largeur et la hauteur (l'exemple de Youtube) :[youtube width=”width”, height=”height”]youtube_video_id[/] ou [iframe]www.url.com[/iframe]
Aligner le texte sur la gauche	[div style="text-align:left"]Texte[/div]
Aligner le centre de texte	[div style="text-align:center"]Texte[/div]

Voici des exemples de BBCode qui peuvent être utilisés dans la vue de la source mais qui n'ont pas d'icône pour la génération automatique.

FONCTIONNALITÉ	BBCode
Aligner le texte au centre	[div style="text-align:center"]Texte[/div]
Barré	[s]text[/s]
Tableaux	[table]{rows}[/table]
Rangées de tableau	[tr]{cells}[/tr]
Cellules de contenu du tableau	Cellule d'en-tête : [th]{content}[/th] Cellule du contenu : [td]{content}[/td]
Lien à un e-mail	[url=mailto:name@company .com]name@company.com[/url]

But	Code	Exemple	Autres commentaires
Redirigez vers un SWT, Redirigez vers une Resource, Redirigez vers un Survey	[swt=xxxxx]Cliquez ici[/swt] [resource=xxxxx]Cliquez ici[/resource] [survey=xxxxx]Cliquez ici[/survey]	[swt=67485]Cliquez ici[/swt]	swt=xxxxx ne doit être utilisé que pour les applications qui ne sont pas SWT Pour connecter le SWT à un autre trg doit être utilisé et une étape « Connect to SWT » (connecter à SWT) doit être ajoutée sous ce déclencheur (voir ci-dessous).
Redirigez de SWT à une étape/SWT	[trg=xxxxx]Cliquez ici[/trg]	[trg=1]Cliquez ici[/trg]	Le numéro d'accès doit être unique.
Ajouter un texte dynamique	[wm-data]xxxxx[/wm-data] [var]xxxxx[/var] [jquery]xxxxx[/jquery] [cookie]xxxxx[/cookie]	[wm-data]key123[/wm-data] [var]variable123[/var] [jquery]jquery123[/jquery] [cookie]cookie123[/cookie]

CSS

À partir de l'Éditeur de texte enrichi, vous serez en mesure d'effectuer des modifications locales à la bulle ou le ShoutOut. Tout CSS entré au niveau local est transféré à l'onglet CSS global et peut être visible à ce niveau-là. Le CSS local remplacera tout le CSS qui est au niveau global. En savoir plus sur la Design Gallery.

Essayer

Identifiez un ShoutOut ou une bulle d'étape sur votre implémentation pour la personnaliser. Essayez d'ajouter un style de police à un texte dynamique, de le relier à un Smart Walk-Thru et ajouter une image ou une vidéo.