Whenever you’re creating a topic, you will be using the WYSIWYG editor to add content to your steps, articles, and launchers. More often than not, your topics require some visual elements to make them more clear and appealing. With Inline Manual, you can add various types of content to your topics such as images, videos or GIFs. With the WYSIWYG editor (WYSIWYG stands for "What You See Is What You Get"), you can customize and enhance the look of your guides. The WYSIWYG editor gives you all the tools that you need to create engaging content for your users.
In this article, we’ll discuss functionalities of the WYSIWYG editor. We'll split it up into five sections, and briefly explain the features contained within each category, providing links to other articles explaining these features in more detail, where necessary.
Text and Paragraph Formatting
- Type any text into the content area;
- Add emphasis to your content: make the text bold, italic, or underlined.
- Use the highlighter or optionally remove the formatting altogether.
- Insert bullet-points, indentations, and set the alignment of your paragraphs.
- Change the format, if you want larger or smaller headings in the text.
Media and Objects
- Use Tokens to create a more personalized experience;
- Add or embed Videos;
- Add Images;
- Insert Tables;
- Use Iframes;
- And insert Line Breaks into the text.
Links and Anchors
- Insert Links or Anchors for better navigation - for example, when your next step is located on a different page or section.
Anchors (black flag icon) bring the user directly to a particular page area. It is often used for sub-headings or chapters in the same body of text.
However, they may not function properly if they already include a '#' sign within the URL of Single Page Applications, as anchor links also use the '#' symbol - check with your developers about this if you're unsure.
If not, then there shouldn't be any issue using anchor links on Single Page Apps or standard apps, but they will not work if a '#' symbol is seen in the URL of Single Page Apps.
We are working towards fixing this in a future release, where we will make an update to this guide.
- Use Source View to code and edit your steps via HTML;
- Create a Div container to make divisions, or to group block-elements for styling;
- Use Show Blocks for visual layout while editing;
- Select the Maximize button to provide more space on the Authoring tool while editing.
- You can use Custom Buttons for better navigation and to personalize your guide further. Read more here.
If you want to edit the HTML of a custom button or want to build one from scratch with HTML, refer to our guide on How to: create custom HTML links/buttons.