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/>, <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/>, <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.<ul>is used to make an unordered (bulleted) list. You'll use it with<li>.<li>creates a list item and should be used with<ul>or<ol>(ordered list).<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 text.
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/>. 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:” or “tel:” before the email address or phone number respectively in the URL box pictured above. 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're adding a website link, your HTML code will be <a href="URL">Text to display</a>. As an example, if we use the code:<a href="https://guidebook.com">Visit the Guidebook
website</a>, it will appear as “Visit the Guidebook website”.
If you want your links to open in a new tab, your HTML should look like this: <a href="URL" target="_blank">Text that is hyperlinked<a>, adding the “target="blank"” text. This is recommended for links like Zoom, Teams, etc. that require a user to use their app on mobile.
Email Address
To add an email address as an active link, your HTML will be <a href="mailto:emailaddress">Email Address or other text</a>. For instance, Email us at <a href="mailto:support@guidebook.com">support@guidebook.com</a> will look like “Email us at support@guidebook.com”.
Phone Number
Finally, to make a phone number an active link, you'll use a similar format: <a href="tel:phonenumber">Phone Number or text you want to
display</a>. For example the HTML, Contact Support by calling <a href="tel:(888) 733-3942">((888) 733-3942</a>, appears “Contact Support by calling (888) 733-3942”.
Need more help? Check out a great HTML reference over at W3Schools.