loading

Adding Rich Text| Hitchhikers Platform

What You’ll Learn

In this section, you will learn:

  • How to add Rich text fields to your Answers experience
  • Common issues or limitations

Answers Rich Text Formatter

Rich text fields are stored in markdown, another markup language (similar to HTML). In order to interpret these fields as HTML that the page can render, we use a function direct from the Answers library - formatRichText(). The formatRichText function accepts three parameters: the field to format, the field name to pass to the analytics event, and the target. These instructions apply to anyone on JS version 1.4.0 or higher.

Wherever you’re using a rich text field, you must use this formatter in order to render correctly on the page.

Parameter Type Description Required Default
fieldName field reference The API name of the field to format Yes N/A
eventOptions
FieldName
string Passed as the fieldName to the analytics event. Should be the same as the fieldName specified No, but strongly recommended Null
target string or object with keys for each link type(see below) The target attribute for the href. No Null, so will use the browser default of “_self”


Basic Example

An example of a common use is for FAQ Answer fields, as these all allow rich text formatting by default.

details: profile.answer ? ANSWERS.formatRichText(profile.answer, "answer", "_top") : null,

Advanced Example

Use the field “c_myRichTextField”, set the targets as follows:

  • Set any “email” links to target _top (parent frame)
  • Set “phone” links to target _self (same window)
  • Set “url” links to target _blank (open in a new window)
  • If “c_myRichTextField” is not populated, fall back to the description field.
details: profile.c_myRichTextField ? 
  ANSWERS.formatRichText(
    profile.c_myRichTextField, 
    'c_myRichTextField',
    {
      email: '_top', 
      phone: '_self', 
      url: '_blank'
    }
  ) 
  : profile.description

Note, If a certain key is not provided, the target will not be set (browser default of _self will be used). In other words, in the more advanced example, you could also leave out phone: ‘_self’ and accomplish the same thing

details: profile.c_myRichTextField ? 
  ANSWERS.formatRichText(
    profile.c_myRichTextField, 
    'c_myRichTextField',
    { 
      email: '_top', 
      url: '_blank'
    }
  )
  : profile.description

The Handlebars Template

The rich text formatter converts markdown to HTML. To allow the HTML to display on the page, we need to ensure the Handlebars template treats it correctly, namely by doing two things:

  1. Disable the Show More/Show Less Functionality (if you have it): If there is HTML in a field, you must remove the show more/show less functionality. The risk is with the truncation, you’d cut off a closing tag (ex. </div>, </p>), which could break the page. (This should be in the component.js file for your card.)

    // showMoreDetails: {
    //   showMoreLimit: 750, // Character count limit
    //   showMoreText: 'Show more', // Label when toggle will show truncated text
    //   showLessText: 'Show less' // Label when toggle will hide truncated text
    // },
    
  2. Add {{{ }}} to your Details section in your Handlebars Template: This ensures that the HTML is rendered on the page, instead of printed as-is or escaping the HTML. (See https://handlebarsjs.com/guide/expressions.html#html-escaping.) This is done by default in the built-in faq-accordion card. If you are forking a card, ensure that the fields that use rich text are surrounded by triple braces.

<div class="HitchhikerFaqAccordion-details">
  {{{card.details}}}
</div>

Rich Text Styling

By default, the following styling will be applied:

  • Bold, underline, and italics styling
  • Bulleted and numbered lists

You can see an example of all this formatting below:

RTF Example

However, there might be some additional styling you want to add - for example, spacing between paragraphs and link styling. Recommended styling is below.

.HitchhikerFaqAccordion-details
{
  p, ul, ol
  {
    margin-bottom: .5rem
  }

  a
  {
    color: var(--yxt-color-brand-primary);
    text-decoration: underline;

    &:hover {
      text-decoration: none;
    }
  }
}

RTF additional formatting

unit Quiz
+20 points
Daily Quiz Streak Daily Quiz Streak: 0
Quiz Accuracy Streak Quiz Accuracy Streak: 0
    Error Success Question 1 of 4

    What formatter should you use for Rich Text fields?

    Error Success Question 2 of 4

    Where is the formatter defined?

    Error Success Question 3 of 4

    Select the parameters of the formatRichText() function.

    Error Success Question 4 of 4

    Can you set the target behavior differently for different kinds of links?

    High five! ✋

    You've already completed this quiz, so you can't earn more points.You completed this quiz in 1 attempt and earned 0 points! Feel free to review your answers and move on when you're ready.
1st attempt
0 incorrect
Splash Loading