# 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><p><em>Required</em><br>Defines the flow that should be displayed.</p><div data-gb-custom-block data-tag="hint" data-style="info" class="hint hint-info"><p>The platform dynamically determines the first step of the flow based on the user's signal, href URL, or other context signals.</p></div></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 drop the user in to start the flow.</p><div data-gb-custom-block data-tag="hint" data-style="warning" class="hint hint-warning"><p>Configure ft-trigger-step when seeking to override default platform behavior.</p></div></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>Find your property-slug in your Flip.to account.</p><div data-gb-custom-block data-tag="hint" data-style="warning" class="hint hint-warning"><p>Configure ft-property when seeking to override default platform behavior.</p></div></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.

{% hint style="info" %}
Content markup is currently in beta. Please reach out to our [Customer Success team](/docs/support/customer-success.md) 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/docs/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.