日程調整カレンダーウィジェット（サイトへの埋め込み機能）

  • 更新

 

日程調整カレンダーウィジェットを利用すると、WebサイトにTimeRexの日程調整カレンダーを埋め込むことができ、Webサイト上で日程調整ができるようになります。

 

利用条件

全てのプランで利用可能です。

 

基本的な利用方法

日程調整カレンダーの設定確認ページの「日程調整カレンダーの埋め込み」に表示されるコードをWebサイトのBodyタグ内に追加すると、Webサイトに日程調整カレンダーを埋め込むことができます。

 

利用例

実際にWEBページに埋め込んでいただいた際のサンプルページは以下をご覧ください。

https://timerex.net/blog/update/201109-embed

 

TimeRexウィジェットの色変更例は以下をご覧ください。

https://timerex.net/blog/update/210218-color

 

日程調整カレンダーウィジェットへのデータ連携

Webサイトで管理している会員情報等を日程調整カレンダーウィジェットに連携することができます。データ連携方法は「設問項目の自動入力」と「パラメータ連携」の2つがあり、それぞれ、埋め込みコードの一部を変更することで簡単に実現可能です。

 

設問項目の自動入力（データ連携1）

日程調整時の設問項目に顧客の名前やメールアドレス等を自動入力しておくことができます。

 

サンプルコード

<!-- 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': 'ja',
        'primary_color': '#2980b9'
    });
</script>
<!-- End TimeRex Widget -->

 

パラメータ

名前 データ型 必須 備考
guest_company String False 標準設問項目の「会社名」に入る値
guest_name String False 標準設問項目の「名前」に入る値
guest_email String False 標準設問項目の「メールアドレス」に入る値
locale String False

表示する言語を指定できます。

  • ja: 日本語
  • en: 英語
primary_color String False

ウィジェットのキーカラーをカラーコードで指定できます。（プレミアムプランのみで利用できます）

  • カラーコードで指定例

    • #00000000（8桁）

    • #000000（6桁）

    • #000（3桁）

    • 00000000（#なし）

    • 000000（#なし）

    • 000（＃なし）
disable_logo Boolean False

ウィジェットのTimeRexロゴを非表示にできます（プレミアムプランのみで利用できます）

  • true: ロゴを非表示
  • false: ロゴを表示

 

パラメータ連携（データ連携2）

ページ上には表示しない値を日程調整カレンダーウィジェットに連携することができます。

会員を識別するIDや流入元等の把握に利用できます。

 

サンプルコード

<!-- 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 -->

 

パラメータ

名前 データ型 必須 備考
url_params Array False

最大10個のパラメーターを渡すことができます（10個を超えるとエラーが表示されます）。

パラメータはURLエンコードする必要があります。

 

日程調整カレンダーウィジェットの読み込みタイミングの制御

埋め込む先のWebページ等の問題によりウィジェットの読み込みタイミングを制御したい場合、以下のようにコードを変更し、TimerexCalendar() 関数を呼び出すことで制御できます。

 

手順1：ウィジェットコードをBody内に追加

Body内のウィジェットを表示したい部分に以下のコードを追加すします。

<!-- 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 -->

 

手順2：関数を呼び出すコードを追加

ウィジェットを読み込みたいタイミングでTimerexCalendar() 関数を呼び出します。

<button onclick="TimerexCalendar();">Load</button>

 

 

関連記事