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

  • 更新

 

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

 

ご利用条件

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

 

利用方法

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

 

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

Webサイトで管理している会員情報等を日程調整カレンダーウィジェットに連携することができます。データの連携は、埋め込みコードの一部を変更することで簡単に実現可能です。

 

サンプルコード

<!-- 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: ロゴを表示



TimeRexウィジェット（埋め込み）利用例

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

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

 

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

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

 

関連記事