TW Widget Showcase — Tourism Whistler

How It Works

Auto-initialization: Place a <div class="tw-widget"></div> anywhere in the page. _TWWIDGET.init() runs on $(document).ready() and replaces each element with the full widget HTML, then wires up date pickers, type-change logic, and search submission.

Search — clicking the yellow button navigates to the appropriate /cart/ funnel URL with all parameters appended.
Date pickers — powered by Pickadate.js 3.6.3. Arrive picker auto-constrains Depart to start after Arrive.
Type change — changing the type dropdown swaps the search button label and shows/hides sub-category lists, adults, children, players.
Mobile — on screens ≤840px, .tw-widget.hero, .az, and .home widgets are hidden; a .mobile-placeholder is injected into .article with expand/collapse behaviour.
Analytics — the widget pushes to dataLayer on every search. The digitalData global must be initialized before widget.js loads.

Playground

Build a widget with the options below and render it for real — the same script that runs on the site. Search actually goes to the funnel. The URL updates as you go, so you can share a link that opens with these settings.

What & where Layout Booking type Title Button label Link text Hide-again text Analytics name

Fields Show sub-category dropdown Pre-select Adults Children Hide adults Hide children Show "or call" phone line Open the funnel in a new tab

Dates Single date only Arrive days, or Depart days, or Earliest or Latest or

Block days

Live widget

Set your options and press Render widget.

HTML to paste

1. Lodging — Default Widget

The standard sidebar widget. Shows Arrive/Depart dates + Adults + Children. Searches /cart/lodging-search/.

HTML

<!-- Minimal: lodging is the default type -->
<div class="tw-widget"></div>

<!-- Explicit with options -->
<div class="tw-widget"
                            data-type="lodging"
                            data-adult="2"
                            data-child="0"
                            data-title="Book Your Stay"></div>

Funnel URL: /cart/lodging-search/?arrivaldate=MM/DD/YYYY&departuredate=MM/DD/YYYY&adultcount=N&childcount=N
Default values: 2 adults, 0 children.
Shows: Arrive + Depart dates, Adults, Children.

2. Activities Widget

Shows an activity sub-category dropdown when data-list is present. Searches /cart/activity-search/.

HTML

<!-- With sub-category list -->
<div class="tw-widget"
                            data-type="activities"
                            data-list></div>

<!-- Pre-select a specific activity category -->
<div class="tw-widget"
                            data-type="activities"
                            data-list
                            data-productcategoryid="172"></div>
<!-- 172 = Hiking -->

Funnel URL: /cart/activity-search/?arrivaldate=...&productcategoryid=N
data-list — presence (even empty) triggers the sub-category dropdown.
data-productcategoryid — pre-selects a category. Use pipe-separated IDs for multiple: "172|188".
Note: Adults and children are hidden for activities — only dates matter.

3. Golf Widget

Replaces Adults/Children with a Players dropdown (1–4). Searches /cart/golf-search/.

HTML

<div class="tw-widget"
                            data-type="golf"
                            data-player="2"></div>

Funnel URL: /cart/golf-search/?arrivaldate=...&quantity=N
Players range: 1–4.
Shows: Arrive + Depart dates, Players (Adults and Children are hidden).

4. Lifts — Simple Mode (Single Date)

Adding data-simple hides the Depart date — useful for day-use products like lift tickets. Searches /cart/lift-search/.

HTML

<div class="tw-widget"
                            data-type="lifts"
                            data-simple></div>

<!-- data-simple works on any type -->
<div class="tw-widget"
                            data-type="activities"
                            data-simple
                            data-list></div>

Funnel URL: /cart/lift-search/?arrivaldate=...
data-simple — hides the Depart date picker. Works on any type.
Other single-date types: transfers, activities, rentals, lessons.

5. Transfers Widget

Shows Bus / Limousine / Scheduled Air sub-category. Searches /cart/transport-search/.

HTML

<div class="tw-widget"
                            data-type="transfers"
                            data-list></div>

Sub-categories: All Transfers / Bus (2) / Car Rental (1144) / Limousine (193) / Scheduled Air (194)
Funnel URL: /cart/transport-search/?arrivaldate=...&productcategoryid=N

6. Rentals Widget

Bike and ski/snowboard rentals. Searches /cart/rental-search/.

HTML

<div class="tw-widget"
                            data-type="rentals"
                            data-list></div>

Sub-categories: Down Hill Bikes (1092) / Cross Country Bikes (1093) / Valley Trail Bikes (1094) / Road Bikes (1095) / Ski/Snowboard (133) / Ski/Snowboard Delivery (205)

7. Lessons Widget

Ski, snowboard, and bike lessons by age group. Searches /cart/lesson-search/.

HTML

<div class="tw-widget"
                            data-type="lessons"
                            data-list></div>

Sub-categories: Adult Lessons (202) / Teen Lessons (203) / Kids Lessons (204) / Down Hill Bike Lessons (1096) / Cross Country Bike Lessons (1097) / Valley Trail Bike Lessons (1098) / Road Bike Lessons (1099)

8. All Types — Type Selector Visible

Using data-type="all" shows the full type dropdown. Changing the type updates the button label, shows/hides sub-selectors dynamically.

HTML

<div class="tw-widget"
                            data-type="all"
                            data-list></div>

Type dropdown options: Lodging / Lifts / Transfers / Activities / Rentals / Golf / Lessons
Dynamic behaviour on type change:

Icon sprite updates to match selected type
Search button label updates (Search / Lift Search / Activity Search…)
Adults + Children show for Lodging; Players for Golf; hidden for others
Sub-category dropdown appears for Activities, Transfers, Rentals, Lessons

9. Custom Title

data-title injects a heading above the widget fields. The footer variant also adds a phone number fallback.

HTML

<div class="tw-widget"
                            data-type="lodging"
                            data-title="Book Your Whistler Stay"></div>

<!-- Footer variant adds phone fallback -->
<div class="tw-widget foot"
                            data-type="lodging"
                            data-title="Plan Your Trip"></div>

<!-- Custom phone number -->
<div class="tw-widget"
                            data-phone
                            data-phone-num="1.800.944.7853"></div>

data-title — any string. Rendered as <h3> inside the widget bar.
data-phone — shows the "or call 1.800.944.7853" line below the search button.
data-phone-num — overrides the default phone number link and text.
data-phone-num-2 — overrides the international number.

10. Pre-set Dates & Custom Button

Dates can be pre-filled as a specific date or as +N days from today. The button label can be overridden.

HTML

<!-- +3 days arrival, +7 days departure -->
<div class="tw-widget"
                            data-type="lodging"
                            data-arrival="3"
                            data-departure="7"
                            data-btn="Find a Room"></div>

<!-- Specific date -->
<div class="tw-widget"
                            data-arrival="12/20/2025"
                            data-departure="12/27/2025"></div>

<!-- Constrain date range -->
<div class="tw-widget"
                            data-min="0"
                            data-max="90"></div>

data-arrival / data-departure — accepts M/D/YYYY format, or a number (+N days from today).
data-min / data-max — date range constraints. Same format: date string or +N days.
data-disable — comma-separated day-of-week numbers to disable (0=Sun, 6=Sat). Example: "0,6" disables weekends.
data-btn — overrides the search button label.

11. Inline Widget — Full-Width Bar

The inline class creates a 100%-wide horizontal booking bar. Used within page content — typically on activity or accommodation landing pages.

HTML

<div class="tw-widget inline"
                        data-type="lodging"
                        data-title="Search Lodging"></div>

<!-- Activities inline -->
<div class="tw-widget inline"
                        data-type="activities"
                        data-list
                        data-title="Book an Activity"></div>

The inline widget bar uses a blue-to-teal gradient matching the hero widget. It is always visible (no mobile hide). The date picker pops up attached to the input rather than a container element. All other data attributes apply.

12. Phone Widget — Call to Book

Shows phone numbers only — no date picker, no search button. Used in the header bar when a booking funnel isn't appropriate. Hidden at ≤840px.

HTML

<!-- Default: shows 1.800.944.7853 -->
<div class="tw-widget phone"></div>

<!-- Custom phone numbers -->
<div class="tw-widget phone"
                        data-title="Reservations"
                        data-phone-num="1.800.944.7853"
                        data-phone-num-2="1.604.932.0606"></div>

The JS generates the heading "Call to Book" automatically. Override with data-title.
A mobile placeholder is injected into .article with expand/collapse toggle — ensure a <div class="article"> exists on the page.

13. Link Trigger — Widget on Demand

An <a class="tw-widget-link"> reveals a booking widget on first click. The widget is injected after the link, keeping the page clean until needed.

Click a button below — the widget appears inline on first click.

HTML

<!-- Sidebar widget on click -->
<a href="#"
                            class="tw-widget-link button button--turquoise"
                            data-type="lodging"
                            data-galabel="Hero CTA">
  Search Lodging
</a>

<!-- Inline (full-width) widget on click -->
<a href="#"
                            class="tw-widget-link inline button button--blue"
                            data-type="activities"
                            data-list>
  Book an Activity
</a>

tw-widget-link — fires once on the first click, then removes the listener.
Supports: all data-* attributes — type, title, adult, child, dates, etc.
inline class — add inline to the <a> to inject a full-width bar instead of a sidebar widget.
data-galabel — pushed to dataLayer as custom_widget_type on search.

14. Modifier Classes

Add to the .tw-widget element to hide specific selectors.

HTML

<!-- Hide adults and children selectors -->
<div class="tw-widget hide--adult hide--child"
                            data-type="lodging"></div>

<!-- Hide players (for non-golf where player is irrelevant) -->
<div class="tw-widget hide--player"
                            data-type="activities"></div>

.hide--adult — hides Adults dropdown
.hide--child — hides Children dropdown
.hide--player — hides Players dropdown

Combine with any type. Useful for simplified date-only widgets where occupancy isn't relevant.

15. Page-Context Variants (Reference)

These variants are page-context specific and require surrounding layout elements. Do not instantiate them standalone.

Hero Widget — inside .hero__overlay panel, hidden ≤840px

<div class="hero hero--text">
                    <div class="hero__overlay">
                    <div class="tw-widget hero"
                    data-type="lodging"
                    data-title="Plan Your Trip"></div>
                    </div>
                    <img class="header-image" src="..." alt="...">
</div>
<!-- JS auto-creates a .mobile-placeholder in .article for ≤840px -->

Home Widget — full-width bar at bottom of hero, hidden ≤840px

<div class="hero">
                        <div class="tw-widget home"
                        data-type="lodging"
                        data-title="Plan Your Trip"></div>
                        <img class="header-image" src="..." alt="...">
</div>
<!-- Renders as 920px-wide absolute bar pinned to bottom of hero -->
<!-- Also needs: .article exists, .openMobile for expand/collapse -->

Rewards Widget — email capture for Rewards sign-up

<div class="tw-widget widget--rewards">
                        <!-- Inner HTML is preserved and wrapped in widget chrome -->
                        <p>Join Whistler Rewards and earn points on every stay.</p>
                        <input type="email" placeholder="Your email">
                        <input type="submit" value="Join Now">
</div>

Custom Widget (.tw-widget.custom) — wrap any content in widget chrome

<div class="tw-widget custom"
                        data-title="Special Offer">
                        <!-- Any HTML — gets wrapped in widget-new / tw-widget-headbar -->
                        <p>Free $100 Activity Voucher with 3+ night stay.</p>
                        <a href="/deals/" class="button button--yellow">View Deals</a>
</div>
<!-- Also needs: .article exists on page -->

Data Attributes — Complete Reference

Attribute	Values	Effect	Applies to
data-type	`lodging` `lifts` `transfers` `activities` `rentals` `golf` `lessons` `all` `vacation`	Pre-selects booking type, sets search URL, shows/hides selectors	All widgets
data-title	Any string	Adds `<h3>` heading inside widget bar	All widgets
data-list	Present (any value or empty)	Shows sub-category dropdown for activities/transfers/rentals/lessons	Standard, hero, az, home, inline
data-adult	1–9	Pre-selects adult count	Standard, hero, az, home, inline
data-child	0–9	Pre-selects children count	Standard, hero, az, home, inline
data-player	1–4	Pre-selects players count (golf)	Standard, hero, az, home, inline
data-simple	Present (any value or empty)	Hides Depart date — single-date mode	All widgets
data-arrival	`M/D/YYYY` or `+N` days	Pre-fills Arrive date picker	All widgets
data-departure	`M/D/YYYY` or `+N` days	Pre-fills Depart date picker	All widgets
data-min	`M/D/YYYY` or `+N` days	Minimum selectable date on both pickers	All widgets
data-max	`M/D/YYYY` or `+N` days	Maximum selectable date on both pickers	All widgets
data-disable	Comma-separated day numbers `0–6`	Disables specific days of week (0=Sun, 6=Sat)	All widgets
data-btn	Any string	Overrides the search button label	All widgets
data-phone	Present (any value or empty)	Shows "or call 1.800.944.7853" below search button	Standard, inline
data-phone-num	Formatted number e.g. `1.800.944.7853`	Overrides primary phone number text + href	Standard, phone widget
data-phone-num-2	Formatted number	Overrides international number text + href	Standard, phone widget
data-style	CSS string e.g. `background:#e42b5d`	Applies inline CSS to widget bar element	All widgets
data-url	Domain string e.g. `www.whistler.com`	Overrides the base domain for the search URL	All widgets
data-productcategoryid	Pipe-separated IDs e.g. `172\|188`	Pre-selects and appends product category to funnel URL	All widgets
data-galabel	Any string	Pushed to `dataLayer` as `custom_widget_type` on search	All widgets, tw-widget-link
data-salesid	Inntopia sales ID	Appended to funnel URL as `&salesid=N`	All widgets
data-packageid	Package ID	Appended to funnel URL	All widgets
data-supplierid	Supplier ID	Appended to funnel URL	All widgets
data-locationid	Location ID	Appended to funnel URL	All widgets
data-productid	Product ID	Appended to funnel URL	All widgets
data-preferred	Any	Appended to funnel URL as `&preferred=...`	All widgets
data-sortcode	Any	Appended to funnel URL	All widgets
data-group	Any	Appended to funnel URL	All widgets

Search URLs by Type

data-type	Funnel URL	Key params
lodging	`/cart/lodging-search/`	arrivaldate, departuredate, adultcount, childcount
lifts	`/cart/lift-search/`	arrivaldate
transfers	`/cart/transport-search/`	arrivaldate, departuredate, productcategoryid
activities	`/cart/activity-search/`	arrivaldate, departuredate, productcategoryid
rentals	`/cart/rental-search/`	arrivaldate, departuredate, productcategoryid
golf	`/cart/golf-search/`	arrivaldate, departuredate, quantity (players)
lessons	`/cart/lesson-search/`	arrivaldate, departuredate, productcategoryid
vacation	`/vrbo/search/`	arrivaldate, departuredate, adultcount (max 6)
all	Reads type dropdown on submit	Dynamic based on selected type

Widget CSS Variants & Modifier Classes

Class	Width	Visible at mobile?	Notes
.tw-widget	310px	Yes	Default sidebar widget
.tw-widget.hero	340px panel	No (hidden ≤840px)	Inside .hero__overlay, blue-teal gradient bg
.tw-widget.az	Side panel	No (hidden ≤840px)	A-Z accommodation listing, appends mobile widget
.tw-widget.home	920px horizontal	No (hidden ≤840px)	Absolute bar at hero bottom, auto-creates mobile widget
.tw-widget.inline	100%	Yes	Full-width horizontal bar, blue-teal gradient
.tw-widget.tile	100%	Stacks below image	Pinned to bottom of .tile, triggered via tw-widget-link
.tw-widget.phone	Full-width bar	No (hidden ≤840px)	Phone numbers only, no date picker
.tw-widget.widget--rewards	330px	Yes	Email capture, preserves inner HTML
.tw-widget.custom	Full-width bar	Yes (mobile-placeholder)	Wraps any inner HTML in widget chrome
.tw-widget.foot	—	—	Footer strip — adds "or call" phone fallback to title area
.tw-widget.hide--adult	—	—	Hides adults dropdown (modifier, combine with any)
.tw-widget.hide--child	—	—	Hides children dropdown (modifier)
.tw-widget.hide--player	—	—	Hides players dropdown (modifier)
.tw-widget-bar-mobile	100%	Only (hidden >916px)	Auto-generated by JS, not manually placed

Activity Categories — Full List

These IDs are used with data-productcategoryid when data-type="activities". Pipe-separate for multiple: data-productcategoryid="172|188".

Misc. Activities 101

Rafting 121

Adventure 122

Attractions 123

Classes 124

Fishing 125

Horseback 126

Scenic Tours 127

X-Country 129

Snowcat Skiing 139

Heli-skiing 140

Snowmobiling 141

4WD Tours 142

Train 143

Sleigh Rides 144

Glider Rides 145

Cruise 151

Tennis 152

Pilates 153

Dog Sledding 160

Package Activities 161

Jeep Rental 162

ATV Rentals 163

Rock Climbing 164

ATV Tours 165

Kayaking 167

Balloon Rides 168

Canoe/Kayak Trip 169

Hot Springs 170

Hiking 172

Backpacking 173

Backcountry Skiing 174

Ice Climbing 175

Snowshoeing 176

Mountain Climbing 177

Tubing 178

Gym Pass 184

Tour 185

Watersports 186

Paintball 187

Zip-line 188

Snowcat Tours 196

Bungee Jumping 198

Running Tours 199

Combo Tours 200

Dining & Nightlife 206

Helicopter Tours 207

Scuba/Snorkling 208

Health & Wellness 1007

Fitness 1008

Bear Viewing 1009

Aerial Sightseeing 1010

Aerial Adventures 1011

Jet Boating 1012

Float Plane Tours 1013

Photography Tours 1015

Yoga 1016

Food Tour 1018

Olympic Experience 1028

Tree Top Adventures 1041

Scenic Lift Ride 1048

Paddle Boarding 1079

Canoeing 1080

Segway Tours 1083

Side by Side UTV 1100

Stand Up Paddleboard 1110

Alpine Slide 1113

Kayaking and Rafting 1164

Mountaineering 1165

Mtn Bike Guided Tour 1166

Ice Skating 1167

Axe Throwing 1175

Mountain Coaster 1176

Wine/Brewery Tour 1178

Cross Country Bike 1192

Valley Trail Bike 1193

Down Hill Bike Tours 1195

E-Bike Tours 1196

Paragliding 1212

Canopy Tour 1251

Guided Experiences 1252

Overnight Camping 1253

Karting 1268

Boating 1271

Mini-Golf 1272

Escape Rooms 1335