Templating

Templating is the process that allows to completely customize some specific parts of Livestorm.
For instance, templating is used to put HTML content inside a modal, a stream, a chat message.

There are two ways of using templating with Livestorm APIs :

One line templates

For one line template, you can easily declare something like

const something = 'Hello'
Modal.showIframe({
  template: `<p>${something}</p>`
})

This will render the following HTML : <p>Hello</p>

It is a simple way to add custom variables inside a template.

However, HTML templates often need to be long and sometimes include other things such as CSS code, javascript code.

When your template becomes longer than one line you should use the multi-lines template.

Multi-lines template

First, create an html file your-template-name.html, then you'll have to import it using this ES5 syntax :

const template = require('./your-template-name.html').default

This allows you to import the file as a string and use it as a variable to declare as a template.

Variable injections

To inject variables inside a template, you can use the very basic templating syntax built into Livestorm plugin :

Modal.showIframe({ template, variables: { count: 3 })
<h1>The count is {{ count }}</h1>

Which will obviously display The count is 3.

Keep in mind that for more complex variables you might need to serialize them using JSON.stringify and JSON.parse when sending them to the template.