Schedule adjustment calendar Widget (Embed)

  • Updated

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.

  • ja: Japanese
  • en: English
primary_color String False

You can specify the key color of the widget by color code. (Premium plan only.)

  • Example

    • #00000000（8 digits）

    • #000000（6 digits）

    • #000（3 digits）

    • 00000000（without #）

    • 000000（without #）

    • 000（without #）
disable_logo Boolean False

Hides the TimeRex logo from the widget. (Premium plan only.)

  • true: Hide the logo.
  • false: Display the logo.

 

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).
Parameters must be URL-encoded.

 

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.

Sample code in Vue.js

Sample code in React

 

Related articles