# Website markup

If you're aiming to create entirely bespoke website experiences, add markup to your site to fine-tune control of how the Flip.to platform blends into the site. 

This markup tells the Flip.to platform whether an element should [trigger a flow](#setting-up-trigger-markup), [pass along signals](#setting-up-signal-markup), or [display content](#setting-up-content-markup).

***

## Setting up trigger markup

Allow for links, buttons, or other elements to initiate actions through the Flip.to platform. [See examples for specific scenarios](#scenarios).

{% code title="Example trigger structure" overflow="wrap" fullWidth="false" %}

```html
<a href="#" ft-trigger="discovery" ft-trigger-step="experiences-list" ft-property="your-property-slug" class="ft-trigger-discovery" style="display:none;">Your action text</a>
```

{% endcode %}

<table><thead><tr><th width="193.33333333333331">Attribute</th><th width="191">Value</th><th>Description</th></tr></thead><tbody><tr><td>ft-trigger</td><td>discovery</td><td><em>Required</em><br>Sets the element to display a specific flow</td></tr><tr><td>ft-trigger-step</td><td><ul><li>experiences-list</li><li>router</li></ul></td><td><p><em>Optional</em>  <br>Defines a specific step to display for the flow.</p><p></p><p>If not set, the visitor will start on the default first step.</p></td></tr><tr><td>ft-property</td><td>{property-slug}</td><td><p><em>Optional</em><br>Defines a specific property for the flow. </p><p></p><p>Find your property-slug in your Flip.to account.</p><p></p><p>If not set, the platform may detect the property automatically if it can be identified from the element href or from signals provided by the page. </p></td></tr><tr><td>class</td><td>ft-trigger-discovery</td><td><em>Required</em><br>Provides a class name for additional styling if needed.</td></tr><tr><td>style</td><td>display:none;</td><td><em>Required</em><br>If Discovery should fail to load, the markup CTA will be hidden.</td></tr></tbody></table>

### Scenarios

#### Show Discovery

{% code overflow="wrap" %}

```html
<a href="#" ft-trigger="discovery" class="ft-trigger-discovery" style="display:none;">Your action text</a>
```

{% endcode %}

#### Show Discovery at the experiences list step

{% code overflow="wrap" fullWidth="false" %}

```html
<a href="#" ft-trigger="discovery" ft-trigger-step="experiences-list" ft-property="your-property-slug" class="ft-trigger-discovery" style="display:none;">Your action text</a>
```

{% endcode %}

{% hint style="warning" %}
The ft-property attribute is required for this markup on sites with multiple properties. It is not required on sites that have only one property set up for Discovery.
{% endhint %}

#### Show Discovery for a specific property (for sites with multiple properties)

{% code overflow="wrap" %}

```html
<a href="#" ft-trigger="discovery" ft-property="your-property-slug" class="ft-trigger-discovery" style="display:none;">Your action text</a>
```

{% endcode %}

#### Show Discovery at the router step (for sites with multiple properties)

{% code overflow="wrap" %}

```html
<a href="#" ft-trigger="discovery" ft-trigger-step="router" class="ft-trigger-discovery" style="display:none;">Your action text</a>
```

{% endcode %}

{% hint style="warning" %}
The ft-property attribute must not be set for this markup.
{% endhint %}

## Setting up signal markup

Allow for a trigger to pass along signals to Flip.to components.

{% code title="Example trigger structure" overflow="wrap" fullWidth="false" %}

```html
<a href="#" ft-promo-code="mayday-promo" ft-arrival-date="2025-05-01" ft-departure-date="2025-05-07">Your action text</a>
```

{% endcode %}

{% hint style="warning" %}
If the trigger also has URL parameters that provide the same type of signal as an existing attribute, the URL parameter will override the attribute.
{% endhint %}

<table><thead><tr><th width="193.33333333333331">Attribute</th><th width="555.5546875">Value</th></tr></thead><tbody><tr><td>ft-promo-code</td><td>custom</td></tr><tr><td>ft-group-code</td><td>custom</td></tr><tr><td>ft-rate-code</td><td>custom</td></tr><tr><td>ft-travel-agent-code</td><td>custom</td></tr><tr><td>ft-corporate-code</td><td>custom</td></tr><tr><td>ft-room-code</td><td>custom</td></tr><tr><td>ft-arrival-date</td><td>custom</td></tr><tr><td>ft-departure-date</td><td>custom</td></tr></tbody></table>

***

## Setting up content markup

Allow for content to display on the website.&#x20;

{% hint style="info" %}
Content markup is currently in beta. Please reach out to our [Customer Success team](broken://pages/RTdPXa9NV7w0qgds4y6l) for more details.
{% endhint %}


---

# 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.flip.to/developers/integrations/websites/website-markup.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.