Skip to main content

Styling the Button Block in the Triptease Messages Platform

Learn to style buttons and set actions like closing messages or linking to URLs in Triptease Messages.

Updated over a week ago

TL;DR

  • The Button block lets you customize button style and choose what happens when guests click.

  • Actions include closing the message, sending an email alert, or redirecting to a URL.

  • Styling includes text, color, size, padding, borders, and more.


When to Use It

Use the Button block when you want to:

  • Prompt guests to take action, like “Book Now” or “Unlock Offer”

  • Redirect users to a specific page, such as a booking engine or special offer

  • Dismiss a message after engagement

  • Trigger an email alert for lead capture or special notifications


How It Works

The Button block appears as a clickable CTA in your message. When selected, it shows a border outline with a Button label.

Suggested screenshot: Button block selected in a message layout


Step-by-Step Instructions

1. Add and Select the Button Block

  • Drag a Button block into your message layout

  • Click to select it and reveal styling options in the right-hand panel


2. Choose the Action

Under Action, select what happens when the guest clicks the button:

  • Close (default): Dismisses the message

  • Notify by email: Opens the guest’s email app with the address you specify filled in.

    • Enter the email address in the provided field

    • Great for making it easy for guests to reach out or ask questions

  • Send to URL: Opens a specified webpage

Pro Tip: For promo code campaigns, use the URL action with a booking engine deep link that includes the code.


3. Customize Button Text and Style

  • Button text: Update the CTA copy (e.g. “Book now”, “Claim deal”)

  • Font: Select the typeface

  • Weight & Size: Choose how bold and large the text appears

  • Font color: Define text color

  • Background color: Set button fill color

  • Corner radius: Adjust to make square or rounded buttons


4. Typography Settings

  • Letter spacing: Add space between characters

  • Line height: Adjust spacing between lines of text (useful for multi-line CTAs)


5. Layout and Border Options

  • Padding: Add spacing around text inside the button (horizontal/vertical)

  • Border: Adjust border thickness and color for visual emphasis


Pro Tips

  • Keep CTAs short and action-driven (e.g. “Book now”, “Get 10% off”)

  • Ensure color contrast is accessible (check WCAG AA guidelines)

  • Use corner radius and padding to match your brand style

  • Use the email action sparingly to avoid overloading your inbox


FAQs / Troubleshooting

Question: What happens if I don’t set an action?

Answer: The button defaults to the "Close" action, which will dismiss the message when clicked.

Q: Can I send to a booking engine with a promo code?

A: Yes, use the Send to URL action and paste in a deep link that includes the promo code.

Q: Can I preview the button in action?

A: Use the message preview mode to test how it behaves in context.

Q: Can I style multiple buttons differently in the same message?

A: Yes, each Button block has its own settings.

Did this answer your question?