The schedule adjustment calendar widget allows you to embed a schedule adjustment calendar into your website to add a scheduling feature to your website.
Availability
Schedule adjustment calendar Widget is available for all users.
How to use
Add the code that appears in the "Embed Calendar" section of the confirmation page for the scheduling adjustment calendar settings inside the body tag on your webpage.
Example of using TimeRex widget (embedded)
Please see below for a sample of embedding in a web page.
https://timerex.net/blog/update/201109-embed
See below for a sample of changing the color of the TimeRex widget.
https://timerex.net/blog/update/210218-color
Data Integration to a schedule adjustment calendar
It is possible to link membership information managed on your website to a schedule adjustment calendar widget. There are two ways to link data: "Automatic input of question items" and "Integration by parameters", each of which can be easily achieved by changing a part of the embed code.
Automatic input of question items (Data Integration)
It is possible to automatically input the customer's name, e-mail address, etc. into the question field when adjusting the schedule.
Example
<!-- Begin TimeRex Widget -->
<div id="timerex_calendar" data-url="https://timerex.net/s/xxxxxxxxxx/xxxxxxxx"></div>
<script id="timerex_embed" src="https://timerex.net/js/embed.js"></script>
<script type="text/javascript">
TimerexCalendar({
'guest_company' : 'Mixtend Inc.'
'guest_name' : 'Tomohiro Kitano',
'guest_email' : 'xxxxxxxx@test.com',
'locale': 'en'
});
</script>
<!-- End TimeRex Widget -->
Parameters
Name | Datatype | Required | Remarks |
guest_company | String | False | The value that goes into the "Company name" section of the standard question items. |
guest_name | String | False | The value that goes into the "Name" section of the standard question items. |
guest_email | String | False | The value that goes into the "Email" section of the standard question items. |
locale | String | False |
Specify the language to be displayed.
|
primary_color | String | False |
You can specify the key color of the widget by color code. (Premium plan only.)
|
disable_logo | Boolean | False |
Hides the TimeRex logo from the widget. (Premium plan only.)
|
Integration by parameters (Data Integration)
You can link values that are not displayed on the page to the calendar widget.
This can be used to understand the IDs that identify members, the source of inflow, etc.
Example
<!-- Begin TimeRex Widget -->
<div id="timerex_calendar" data-url="https://timerex.net/s/xxxxxxxxxx/xxxxxxxx"></div>
<script id="timerex_embed" src="https://timerex.net/js/embed.js"></script>
<script type="text/javascript">
TimerexCalendar({
"url_params": {
"user_hash": "abcdefg1234567",
"campaign_id": "Osaka_SMB"
}
});
</script>
<!-- End TimeRex Widget -->
Parameters
Name | Datatype | Required | Remarks |
url_params | Array | False |
A maximum of 10 parameters can be passed (an error message will be displayed if the number exceeds 10). |
How to control the widget loading timing
If you want to control the loading timing of the widget due to problems with the web page you are embedding it in, you can control the loading timing by changing the code as follows
Step 1: Add the widget code in the Body
Add the following code to the part of the Body where you want the widget to appear.
<!-- Begin TimeRex Widget -->
<div id="timerex_calendar" data-url="https://timerex.net/s/demo.team/xxxxxxxx"></div>
<script id="timerex_embed" src="https://timerex.net/js/embed.js"></script>
<!-- End TimeRex Widget -->
Step 2: Add the code to call the function
Call the TimerexCalendar() function when you want to load the widget.
<button onclick="TimerexCalendar();">Load</button>
Embed schedule adjustment calendar widget in SPA
The schedule adjustment calendar widget can also be embedded in pages using front-end frameworks such as Vue.js and React.
For more details, please refer to the sample code below.