Documentation Banners & Content (HTML, MDX, Mermaid) for JSM, Help & ITSM - Template Types

Discover the different types of templates you can create with Banners & Content (HTML, MDX, Mermaid) for JSM, Help & ITSM. Learn how to use markdown, flowcharts, video links, HTML, and more to build informative and engaging customer support content.

Markdown

Syntax guide for adding markdown: Markdown Cheatsheet

Markdown example.

Example code for adding a chart

```mermaid 
  graph TD; 
  A--{">"}B; 
  A--{">"}C; 
  B--{">"}D;
  C--{">"}D; 
  ```

*** ### Markdown Link

Just add a link to download the markdown.

Markdown link example.

To generate a link to GitHub markdown:

  • Copy permalink Generate github permalink.
  • Open the link
  • Click on the 'code' button
  • Click on the 'raw' button
Generate github markdown link.

*** ### Video Link

Just add a link to your video.

Video example.

*** ### HTML Code

Add HTML code to generate custom content.


  <html>
    <head>
      <title>Href Attribute Example</title>
    </head>
    <body>
      <h1>Href Attribute Example</h1>
      <p>
        <a href="https://www.freecodecamp.org/contribute/"
          >The freeCodeCamp Contribution Page</a
        >
        shows you how and where you can contribute to freeCodeCamp's community and
        growth.
      </p>
      <br />
      <iframe
        id="inlineFrameExample"
        title="Inline Frame Example"
        width="100%"
        height="400"
        src="https://www.openstreetmap.org/export/embed.html?bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861898606&layer=mapnik"
      >
      </iframe>
    </body>
  </html>      
  
HTML code example.

*** ### Website Link

Just add a link to your website.

Please note: it must be no "X-Frame-Options" present on the website to embed.

We also recommend setting the height in pixels using this template type.

Website example.

*** ### Flowchart

Syntax guide for adding markdown: Mermaid Syntax Guide

Flowchart example.

*** ### Atlassian Editor

Create content using your familiar Atlassian editor!

Atlassian editor example.

*** ### Multi Templates

Combine the templates you created earlier into one!

Templates will be rendered in the order they were added - from left to right.

Multi templates example.