# How to use the Legitimate Builder.io integration

Once a set of Legitimate Tags have been purchased with the builder.io feature, you will receive an invite to a page builder where you can customize the content that goes with your item.

Here's a list of content that can be added:

* Text
* Image
* Video
* Content Embeds
  * supports [oEmbed](https://oembed.com/) compatible services such as YouTube, Spotify, SoundCloud, etc.
  * a list of supported services is [here](https://embed.ly/providers)

<figure><img src="https://docs.legitimate.tech/~gitbook/image?url=https%3A%2F%2F3164064276-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FnNIOJu1D25mcBtLbWDqS%252Fuploads%252FU3L0u2bHKznXx9pIglYm%252FScreenshot%25202024-08-08%2520at%25204.25.12%25E2%2580%25AFPM.png%3Falt%3Dmedia%26token%3D108159a4-da9c-4719-8758-974276f7de15&#x26;width=768&#x26;dpr=4&#x26;quality=100&#x26;sign=cfc5f9e9&#x26;sv=1" alt="" width="375"><figcaption></figcaption></figure>

### Editing <a href="#editing" id="editing"></a>

The desktop preview is constrained to a mobile device width in order to simulate the experience on mobile phone. In order to edit, please switch to the Mobile Edit view to change the content.

<figure><img src="https://docs.legitimate.tech/~gitbook/image?url=https%3A%2F%2F3164064276-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FnNIOJu1D25mcBtLbWDqS%252Fuploads%252FrKC7yRMywHekRejaoDcj%252FUntitled%2520%2822%29.png%3Falt%3Dmedia%26token%3D5265a073-5a5e-4d91-9934-6a86f1f8edf5&#x26;width=768&#x26;dpr=4&#x26;quality=100&#x26;sign=cd788418&#x26;sv=1" alt="" width="375"><figcaption></figcaption></figure>

### Styling <a href="#styling" id="styling"></a>

The Legitimate brand fonts PS Times and ABC Favorit are both included as well as other web-safe fonts and system defaults.

You can also include your font files through custom CSS added to the page.

## Video Tutorial <a href="#video-tutorial" id="video-tutorial"></a>

{% embed url="<https://www.loom.com/share/9896aef27571481cbc73fb220fad5985?sid=fcbe93e1-ee91-4a4d-8e04-4255695d0cc2>" %}

### Templates&#x20;

Legitimate has a few options for templates you can use within builder that your team will onbaord you onto during your builder onbaording call.&#x20;

To use a template in your Legitimate Tag's builder.io page simply import that template in the your page:

<figure><img src="/files/q1UokvGI0bUP2OKODzwv" alt=""><figcaption></figcaption></figure>

### Figma to Builder Integration

You can also use the [figma to builder.io plug in](/public-docs/project-docs/managing-your-skus-on-legitimate-dashboard-with-a-third-party-cms-integration/figma-to-builder.io-integration-with-legitimate.md) in order to convert your designs to builder. Please ensure your designs are sized properly for mobile devices before converting by utilizing Figma's [auto-layout feature](https://help.figma.com/hc/en-us/articles/5731482952599-Add-auto-layout-to-a-design). Please follow our details instruction on this process on our "[Figma to Builder.io Integration with Legitimate](/public-docs/project-docs/managing-your-skus-on-legitimate-dashboard-with-a-third-party-cms-integration/figma-to-builder.io-integration-with-legitimate.md)" if you chose to use this option. <br>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.legitimate.tech/public-docs/project-docs/managing-your-skus-on-legitimate-dashboard-with-a-third-party-cms-integration/how-to-use-the-legitimate-builder.io-integration.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.