Help with Rich Text Formatting after using a Crawler/Connector

1

Good morning! One thing I’ve noticed as I’ve started relying more on the crawler/data connectors to bring data into the KG + setting up the body field for extractive QA is that sometimes my text does not format properly. For example, if a title of a longer help article is styled as in “Heading 1” in the KG, it presents in the front end with special characters on either side. Images are also showing up properly in the KG but presenting in the front end as a url. Any tips or best practices? Is there anything I can do when bringing the data in up front to cut down on manual work to get the text to format properly?

Example KG Entity

Example of above KG entity in an answers live preview

Example of a KG entity where the image does not render properly (imported via crawler/connector)
Example of above entity referencing the image as a link in the frontend

These are a few examples but I have a few thousand entities with similar issues and would love any tips to efficiently clean up the data/formatting. Thank you!

2

Hi Sarah!

To ensure the frontend will format and display your rich text content correctly, there are a few things we’ll have to do. I’ve summarized them below, but you can find more information in this Adding Rich Text unit.

  1. Utilize the formatRichText() formatter with the rich text field being used for the details mapping on your frontend custom card:
    details: ANSWERS.formatRichText(profile.body),

  2. Comment out the showMoreDetails section entirely.

  3. Edit the card’s template.hbs file to add a third set of curly braces around card.details. This will actually render the HTML on the page instead of showing escaped, “as-is” HTML.

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

Hope this helps!
DJ

3

Thank you!! the the rich text is now looking fabulous. Now my cards are reading very long without the show more feature but I’ll look into figuring that out.

4

Using the truncate() formatter could help with that! This formula allows you to cut off text at a certain character limit, including rich text. This would look something like:

details: Formatter.truncate(ANSWERS.formatRichText(profile.body), 750), where 750 is the character limit you can play around with.

Best,
DJ

2 Likes