JSM Templates Docs: 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

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.

To generate a link to GitHub markdown:

  • Copy permalink
  • Open the link
  • Click on the ‘code’ button
  • Click on the ‘raw’ button

*** ### Video Link

Just add a link to your video.

*** ### 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>      

*** ### 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.

*** ### Flowchart

Syntax guide for adding markdown: Mermaid Syntax Guide

*** ### Atlassian Editor

Create content using your familiar Atlassian editor!

*** ### Multi Templates

Combine the templates you created earlier into one!

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