> For the complete documentation index, see [llms.txt](https://docs.getmesa.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.getmesa.com/for-developers/embedding-templates.md).

# Embedding templates

This small snippet of JavaScript allows MESA templates to be displayed anywhere. Embedded MESA templates are great because they keep users on your site and are always up-to-date. Embedded MESA templates can go anywhere; on your blog, onboarding emails, FAQ's, or in your integrations page. You can specify a single template you'd like to embed or list all of an app's available templates.

### Installation

Add this `<script>` tag right above your closing `</body>` tag, and then add div tags where you would like the template(s) to appear.

```html
<script src="https://mymesa.site/widgets/widgets.js"></script>
```

### Show a single template

To display a specific template use the **data-template** attribute, whose value is the last part of the template's URL on getmesa.com. For example, use the code below to feature [this template.](https://www.getmesa.com/apps/shopify/integrate/googlesheets/send-order-to-google-sheets-document)

```html
<div data-template="send-order-to-google-sheets-document"></div>
```

### Show all available templates

To display all templates from an app, you will need to use a div with the attribute `data-app` and the value should be the app's name.

There is also an optional attribute to define the number of templates shown, which is the attribute `data-max-items`.

Here is an example of how to use the Shopify app:

```html
<div data-app="shopify" data-max-items="3"></div>
```