日程調整カレンダーウィジェットを利用すると、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 |
表示する言語を指定できます。
|
| primary_color | String | False |
ウィジェットのキーカラーをカラーコードで指定できます。（プレミアムプランのみで利用できます）
|
| disable_logo | Boolean | False |
ウィジェットのTimeRexロゴを非表示にできます（プレミアムプランのみで利用できます）
|
パラメータ連携（データ連携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>
SPAに日程調整カレンダーウィジェットを埋め込む
Vue.jsやReact等のフロントエンドフレームワークを利用したページにも日程調整カレンダーウィジェットを埋め込むことができます。
詳しくは以下のサンプルコードをご参照ください。