Advanced Widget Customization
About This Course
Transcript
Custom CSS and JavaScript
If you want the widget to match your site pixel for pixel — exact fonts, colors, spacing, buttons — you can add your own CSS on the widget's Code tab, layered right on top of the widget's defaults.
The same tab supports custom JavaScript that hooks into four real moments in the booking journey: Widget Load, View Item, Add to Cart, and Conversion. Each hook hands your code a real data object — confirmation code, totals, currency, the widget's name and ID, even the UTM values and referral URL — enough to fire your own analytics or ad-pixel events at exactly the right step.
Both are account-manager features, since they run your own code inside the widget — reach out to your account manager to get them enabled and add your code.
Most teams don't actually need the JavaScript side. TripWorks already pushes those same four events to your page's dataLayer automatically, so if you're using Google Tag Manager, you likely have what you need without writing a line of code.
Selling in another language
If you sell to international guests, set the widget's default language right in the builder's Advanced settings — English, Spanish, French, German, Italian, or Portuguese.
To open one specific link in a different language without changing the widget's saved default, add a language parameter to that link:
…/widget/<widget-id>?language=es
One campaign link can open in Spanish while everything else stays in the widget's regular default — same widget, same catalog, just presented differently.
The widget does not automatically detect a guest's browser language or location — language is always an explicit setting, either the builder's default or a link override.
Deep-linking a widget's URL
A widget's URL accepts parameters that preselect what a guest sees before they even land:
- defaultView — open straight onto
calendar,agenda,catalog,categories, orgiftCards. - category — preselect a category.
- date — open on a specific date.
- hideNav — hide the widget's top navigation for a cleaner embed.
Add them to any widget link the same way you'd add a language parameter, and that link does the picking for you — no separate widget to build per campaign.
Where your bookings actually come from
TripWorks automatically captures the landing URL, referrer, UTM parameters, and ad click IDs on every booking that comes through your widget — there's nothing to turn on.
Connect Google Analytics from Setup → Integrations, drop in your GA4 Measurement ID, and every booking reports as a real purchase event — with revenue and the exact activities booked — broken down per widget, so you can see which page or campaign actually converts.
Next steps
None of this is required to launch a widget. Come back to whichever piece you need, when you need it — or book a demo if you want a walkthrough on your own account.