The TripWorks booking widget builder allows you to create customizable widgets that can be embedded on your website or shared via URL.
Creating a New Widget
Step 1: Access the Widget Builder
- Choose More > Discover More in your TripWorks dashboard
- Select Booking Widgets from the menu
- Choose Create Widget
Step 2: Configure Widget Settings
Widget Name
Enter a descriptive name for your widget (e.g., "Main Website Widget" or "Partner Site - Summer Tours"). This is especially helpful if you manage multiple websites or platforms.
Activity Selection
Choose which activities to display:
- All activities - Shows your entire catalog
- Individual activities - Select specific activities from the dropdown
- All items in a category - Display activities from a specific category
Default View
Select how the widget initially displays:
- Catalog
- Calendar
- Agenda
- Categories
- Gift Cards
Item Layout
Choose the card style for your activities:
- Default - Standard view with 3-4 columns
- Compact - Smaller cards in a 6-column layout
- Expanded - Detailed cards showing pricing, duration, and additional information
Hover over the tooltip icon next to each option to see a visual preview.
Step 3: Additional Options
Language and Display Mode
- Select the language for your widget
- Choose between Full Details (shows all activity information) or Compact (displays only calendar, tickets, and timeslots)
Hover over the tooltip to see visual examples of each display mode.
Show Dynamic Pricing
- Check this box to display pricing on the calendar when dynamic pricing is enabled for your activities.
Hide Navigation Bar
- Enable this option to remove the navigation bar from the top of the widget. This is particularly useful for embedded calendar views where you want a cleaner, more streamlined appearance.
Default to “Choose Date Later”
- When enabled, this option allows customers to purchase vouchers upfront and select their date and time later. This setting only applies to activities with vouchers enabled.
Enable Reseller Attribution
- Check this box to attribute all bookings made through this widget to a specific reseller. You can create reseller widgets either from the reseller profile or directly in the widget builder.
Custom CSS
This section allows you to add custom styling or JavaScript to further customize the widget. While this option is visible in the widget builder, custom code modifications require assistance from your TripWorks account manager.
To request custom CSS or JavaScript for your widget, contact your account manager. This ensures widget quality, security, and consistent performance across all installations.
Step 4: Preview and Create
Use the mobile and desktop toggle to preview your widget on different devices before finalizing. When satisfied with your settings, choose Create Widget.
Managing Existing Widgets
Widget Overview
After creating a widget, you'll see it listed with:
- Widget ID
- Configuration summary
- Action icons for editing and embedding
Editing a Widget
- Select the edit icon next to your widget
- Modify any settings as needed
- Choose Save
Changes automatically update everywhere the widget is installed—no need to update embed codes on your website.
Embed Instructions
Select the embed icon to access installation options:
- Embed Code: Copy the provided code and paste it into your website. Choose whether activities open in a lightbox or redirect to a new page.
- Button: Generate a button-style widget with customizable text and styling.
- Direct URL: Share a direct link to your booking widget—ideal for email campaigns or social media.
- QR Code: Download a QR code that links to your booking widget. Perfect for printed materials, venue signage, or promotional displays.
Copying a Widget
Use the copy function to quickly duplicate a widget configuration. This is helpful when you need similar widgets for multiple websites with only minor setting differences.
Need Help?
If you have questions about the widget builder or need assistance creating custom widgets, contact the TripWorks support team.