There are a couple different methods for formatting your description text, whether the description is part of a schedule session, a custom list item, or your general info menu item. You can use the provided formatting tools, or use HTML tags manually, or with a template import.
The following HTML tags are supported, and are discussed in further detail below:
<a href="">, <br>, <hr>, <ul>, <li>, <h1> through <h4>, <p>, <span>, <strong>,<u>, and <em>.
Formatting Tools
In the general info section, schedule sessions, and custom list items, you can use the Rich Text Editor (RTE) tools. You’re able to select text and apply formatting using any of the buttons along the top of the description field.
From left to right:
- The formatting button allows you to highlight text and apply headers 1, 2, or 3, as well as setting the text to normal sized text.
- The bold option allows you to highlight and bold text.
- The italic icon allows you to italicize text.
- The underline button allows you to underline text.
- The unordered list option allows you to create an unordered, bulleted list.
- The link icon allows you to link text to a website, email, or phone number.
- The focus button allows you to zoom in on the description, which is helpful if you are working on a long description.
- The HTML option toggles between two different modes: standard text entry and the HTML editor.
HTML: Manual Entry
You can manually apply styling by switching to the “code editor” view and typing HTML tags. To enter the code editor view, simply press the < > button.
You can use these HTML tags: <a href="">, <br>, <hr>,<ul>, <li>, <h1> through <h4>, <p>, <span>, <strong>,<u>, and <em>.
<a href="">is used to hyperlink text. You can use it for URLs, email addresses, and telephone numbers<br/>creates a line break in your description<hr>creates a horizontal line in your description<ul>is used to make an unordered (bulleted) list. You'll use it with<li><li>creates a list item when nested within<ul>tags<h1>through<h4>are different header sizes<p>creates a paragraph<span>is used to contain other elements, like styling elements<strong>is used to bold text<u>is used to underline text<em>is used to italicize tex
When using any of these HTML tags, you also need to close the tag when you want the styling to end, except in the case of <br> and <hr>. For example, to close a <strong> tag you'll use </strong> adding the “/”, so the line may look something like this:
HTML: Template Import
When you use a schedule template or a custom list template, you can include HTML formatting in the description field for your sessions or list items.
Depending on how your data is structured, it may help to use concatenation which allows you to combine data across cells. You can then copy the combined content into a description field.
Linking Within a Description Field
If you're linking to a website, email address, or phone number within the description of a custom list item or session, you can use the HTML information below either within Builder or in a template, or you can make the text an active link by using the Link button in the formatting bar.
For example, we'll add a website link to a session description. Type the text you want displayed, and have the website URL copied. Highlight the text, tap the link button in the formatting tool bar, and click Insert link.
Enter the URL and click Save.
This will now be an active link.
If you want the link to open in a new tab—this works particularly well for links to Zoom, Teams, etc.—be sure to select the “Open link in new tab” checkbox when you add the link.
If you’d like to make an email address or phone number an active link, add “mailto:” before the email address or “tel:” before the phone number when you add them to the URL field. For instance, you can add the text “mailto:support@guidebook.com” to the URL field. When a user taps this link in your guide, their native mail app will open to a new email with “support@guidebook.com” in the “To” field.
Linking with HTML
Rather than using the Link formatting button, you can either add HTML manually from the HTML button on the far-right of the formatting bar, or you can include HMTL in the description section of your custom list or schedule template. If you are using a template, it may be helpful to use concatenation to gather all the HTML tags and your information into one cell.
Website
If you want to make a web address interactive so that people can tap on it to navigate to a website, use this format.
<a href="https://example.com/">Visit example.com</a>
You do not need to include www. in the web address, but you must include either http:// or https://. This ensures that your address is treated as an absolute, rather than relative, link.
To force links to open in a new tab (on Guidebook Web) and to open in the device’s default browser (on mobile devices), add a target="_blank" attribute within the opening <a> tag. You should always do this for meeting links, such as the link to join a Zoom call or Skype call.
<a href="https://example.com/" target="_blank">
Visit example.com in a new tab
</a>
Only the text between the two <a> tags will be visible. You do not need to include the web address in the visible text, as long as everything is correctly formatted in the opening tag.
Email Address
If you want to make an email address interactive so that people can tap on it to begin composing an email, use this format.
<a href="mailto:example@example.com">Email example@example.com</a>
Only the text between the two <a> tags will be visible. You do not need to include the email address in the visible text, as long as everything is correctly formatted in the opening tag.
Phone Number
If you want to make a phone number interactive so that people can tap it to make a call, use this format.
<a href="tel:+1-555-555-5555">Call (555) 555-5555</a>
Only the text between the two <a> tags will be visible. You do not need to include the phone number in the visible text, as long as everything is correctly formatted in the opening tag.
Need more help? Check out a great HTML reference over at W3Schools.