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, pass along signals, or display content.


Setting up trigger markup

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

Example trigger structure
<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>
Attribute
Value
Description

ft-trigger

discovery

Required Defines the flow that should be displayed.

circle-info

The platform dynamically determines the first step of the flow based on the user's signal, href URL, or other context signals.

ft-trigger-step

  • experiences-list

  • router

Optional Defines a specific step to drop the user in to start the flow.

circle-exclamation

ft-property

{property-slug}

Optional Defines a specific property for the flow.

Find your property-slug in your Flip.to account.

circle-exclamation

class

ft-trigger-discovery

Required Provides a class name for additional styling if needed.

style

display:none;

Required If Discovery should fail to load, the markup CTA will be hidden.

Scenarios

Show Discovery

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

Show Discovery at the experiences list step

circle-exclamation

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

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

circle-exclamation

Setting up signal markup

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

circle-exclamation
Attribute
Value

ft-promo-code

custom

ft-group-code

custom

ft-rate-code

custom

ft-travel-agent-code

custom

ft-corporate-code

custom

ft-room-code

custom

ft-arrival-date

custom

ft-departure-date

custom


Setting up content markup

Allow for content to display on the website.

circle-info

Content markup is currently in beta. Please reach out to our Customer Success team for more details.

Last updated