You can embed a TimeRex calendar on your website as a widget.
For an example of how a widget looks when embedded on a website, see Embed a calendar on your website.
For techniques such as opening a calendar in a pop-up when the visitor scrolls or switching between multiple calendars with buttons, see Advanced techniques for improving your booking flow with widgets.
Availability
This feature is available on all plans.
Basic setup
On the calendar details page, click Embed and copy the script. Add the script inside the <body> tag of your website to embed the calendar as a widget.
For details, see the Calendar Widget Reference | TimeRex Developer Portal.
FAQ
How can I track conversions?
How can I track conversions?
In the embedded script, use the onBookingComplete() function of the Callback feature inside TimerexCalendar() to configure tracking on your website.
For details, see Calendar Widget Reference > Callback | TimeRex Developer Portal.
For sample code, see the sections for tracking Google Ads conversions with Callback and tracking Yahoo Ads conversions with Callback on that page.
The same approach applies to Facebook Ads (Meta Ads), Google Analytics, and similar services.
How can I redirect guests to a thank-you page?
How can I redirect guests to a thank-you page?
In the embedded script, use the onBookingComplete() function of the Callback feature inside TimerexCalendar() to configure the redirect on your website.
For details, see Calendar Widget Reference > Callback | TimeRex Developer Portal.
For sample code, see the section for redirecting guests to another page, such as a thank-you page, after booking completion.
If you track conversions, configure the tracking on the thank-you page.
You can also configure the following without redirecting to a thank-you page:
Tracking with Google Analytics, Google Ads, Facebook Ads (Meta Ads), and similar services. See “How can I track conversions?”
A custom message on the booking completion screen. Enter the message in Message to display after booking under Advanced Settings for the calendar. The message is shown on the booking completion screen and in the booking completion notification email.
How can I identify the traffic source?
How can I identify the traffic source?
Capture the traffic source on the parent page in advance, then pass the value to the widget as a parameter inside TimerexCalendar() in the embedded script.
For details, see Calendar Widget Reference > Parameter integration (Data integration 2) | TimeRex Developer Portal.
If you track conversions, use Callback to return the parameter to the parent page.
How can I change the key color?
How can I change the key color?
This is available on the Premium Plan.
Inside TimerexCalendar() in the embedded script, specify any color code for the primary_color parameter on your website.
Example: TimerexCalendar({"primary_color":"#283640"});
How can I hide the TimeRex logo?
How can I hide the TimeRex logo?
This is available on the Premium Plan.
Inside TimerexCalendar() in the embedded script, set the disable_logo parameter to true on your website.
Example: TimerexCalendar({"disable_logo":true});
How can I disable the hyperlink on the calendar title?
How can I disable the hyperlink on the calendar title?
This is available on the Premium Plan.
Inside TimerexCalendar() in the embedded script, set the disable_title_hyperlink parameter to true on your website.
Example: TimerexCalendar({"disable_title_hyperlink":true});
How can I embed the widget in English?
How can I embed the widget in English?
Inside TimerexCalendar() in the embedded script, set the locale parameter to en on your website.
Example: TimerexCalendar({"locale":"en"});
How can I embed multiple widgets on one web page?
How can I embed multiple widgets on one web page?
As a general rule, you can embed only one widget on a single web page.
However, you can use an iframe to load widgets placed on external pages and display multiple widgets on one page.
How can I embed the widget using an iframe?
How can I embed the widget using an iframe?
The script obtained from Embed is an HTML tag inserted inside the <body> tag of your website. It is not an iframe tag.
You can implement the widget with an iframe, but you must prepare a separate page containing the embedded HTML tag and load that page in the iframe.
Is the widget responsive?
Is the widget responsive?
Yes. The widget supports responsive layouts.
However, you cannot specify the width at which the desktop and smartphone views switch.
The widget is displayed at 100% width. Adjust the width of the containing element on your website to control the widget width.
How can I make the widget area scroll, or prevent it from scrolling?
How can I make the widget area scroll, or prevent it from scrolling?
The height of the calendar timeline in the widget changes according to the available times being shown.
To avoid scrolling within the widget, make the containing element as wide as the widget’s maximum width, or allow the container width to change with the calendar state.
To reduce the height of the embedded widget and make its content scrollable, narrow the containing element.
How can I use Google Tag Manager (GTM)?
How can I use Google Tag Manager (GTM)?
You cannot place a Google Tag Manager tag directly inside the TimeRex embedded widget.
If GTM is installed on the web page containing the widget, you can use Callback to return event information to that page when a booking is completed and trigger the GTM tag.
How can I add an affiliate tag?
How can I add an affiliate tag?
You can use Callback to return an affiliate tag to the parent page.
Confirm the following with the affiliate service:
Whether the affiliate service can measure conversions when the affiliate tag is received on the parent page.
How the affiliate service measures conversions after the parent page receives the affiliate tag.