メインコンテンツにスキップ
すべてのコレクション日程調整カレンダー日程調整カレンダーの詳細設定
日程調整カレンダーウィジェット(サイトへの埋め込み機能)
日程調整カレンダーウィジェット(サイトへの埋め込み機能)
昨日アップデートされました

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

Webサイトにウィジェットとして埋め込んだ際のイメージにつきましては、こちらの活用テクニックをご確認ください。

利用条件

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

基本的な利用方法

日程調整カレンダー詳細ページの「埋め込み」ボタンから取得できるスクリプトをWebサイトのBodyタグ内に追加すると、Webサイトに日程調整カレンダーをウィジェットとして埋め込むことができます。

詳細は下記ページをご覧ください。

以降は、ウィジェット利用の設定に関するFAQとなります。

コンバージョン計測を行いたいです。

埋め込みスクリプト内にある TimerexCalendar() 関数の中で、Callback機能の onBookingComplete() 関数を用いてWebサイト側に設定を行ってください。

詳細は下記ページをご覧ください。

サンプルコードにつきましては、上記ページの『Callbackを利用してGoogle広告でコンバージョン計測する場合のサンプルコード』セクション・『Callbackを利用してYahoo広告でコンバージョン計測する場合のサンプルコード』セクションをご確認ください。

※ Facebook広告(Meta広告)、Google Analyticsなどでの計測方法も同様です

サンクスページにリダイレクトしたいです。

埋め込みスクリプト内にある TimerexCalendar() 関数の中で、Callback機能の onBookingComplete() 関数を用いてWebサイト側に設定を行ってください。

詳細は下記ページをご覧ください。

サンプルコードにつきましては、上記ページの『予約完了後に別のページ (Thanksページなど)にリダイレクトするサンプルコード』セクションをご確認ください。

コンバージョン計測を行う場合には、サンクスページ側で設定を行ってください。

なお、サンクスページにリダイレクトさせなくても、以下のような設定は可能です。

  • Google AnalyticsやGoogle広告、Facebook広告(Meta広告)などの計測設定
    ⇒ 『コンバージョン計測を行いたいです。』セクションをご確認ください

  • 日程調整完了画面への任意のメッセージ表示
    ⇒ 日程調整カレンダーの「詳細設定」内にある「日程調整完了時に表示するメッセージ」項目にメッセージを記載してください
     ※ 記載した内容は、日程調整完了画面と日程調整完了の通知メール内に表示されます

流入元を把握したいです。

親ページ側であらかじめ流入元を取得しておき、埋め込みスクリプト内にある TimerexCalendar() 関数の中で、流入元の値をパラメータとしてウィジェット側に渡してください。

詳細は下記ページをご覧ください。

コンバージョン計測を行う場合には、Callbackを利用してパラメータを親ページに返してください。

キーカラーを変更したいです。

プレミアムプランで対応しています。

埋め込みスクリプト内にある TimerexCalendar() 関数の中で、primary_color パラメータを任意のカラーコードにてWebサイト側で指定いただく形となります。

例えば、TimerexCalendar({"primary_color":"#283640"}); のようになります。

詳細は下記ページをご覧ください。

TimeRexのロゴを非表示にしたいです。

プレミアムプランで対応しています。

埋め込みスクリプト内にある TimerexCalendar() 関数の中で、disable_logo パラメータを true とWebサイト側で指定いただく形となります。

例えば、TimerexCalendar({"disable_logo":true}); のようになります。

詳細は下記ページをご覧ください。

日程調整カレンダーのタイトルのハイパーリンクを無効にしたいです。

プレミアムプランで対応しています。

埋め込みスクリプト内にある TimerexCalendar() 関数の中で、disable_title_hyperlink パラメータを true とWebサイト側で指定いただく形となります。

例えば、TimerexCalendar({"disable_title_hyperlink":true}); のようになります。

詳細は下記ページをご覧ください。

ウィジェットを英語で埋め込みたいです。

埋め込みスクリプト内にある TimerexCalendar() 関数の中で、locale パラメータを en とWebサイト側で指定いただく形となります。

例えば、TimerexCalendar({"locale":"en"}); のようになります。

詳細は下記ページをご覧ください。

1つのWebページに複数のウィジェットを埋め込みたいです。

基本的には1つのWebページに1つのみ、ウィジェットを埋め込める仕様です。

iframe等をご利用いただき、外部のページに設置したウィジェットを呼び出す形にて、ウィジェットを1ページに複数並べて表示することは可能です。

iframeを利用してウィジェットを埋め込みたいです。

「埋め込み」ボタンから取得できるスクリプトは、WebサイトのBodyタグ内に挿入するHTMLタグとなっており、iframeタグではありません。

iframeで実装することは可能ですが、HTMLタグを埋め込んだ別ページをご用意いただき、iframeで呼び出していただく必要があります。

レスポンシブ対応したいです。

ウィジェットはレスポンシブ対応しています。

ただし、PC / SP のビューが切り替わる横幅をお客様側で指定いただくことには対応していません。

ウィジェットは横幅が100%で表示される仕様のため、埋め込み先のコンテンツ幅を調整することで、埋め込んだウィジェットの横幅調整が可能です。

ウィジェット部分をスクロール表示させたいです。またはさせたくないです。

ウィジェットのカレンダーの時間軸(縦幅)は、提示される日程候補の状況により可変です。

ウィジェット部分のスクロールが発生しないようにするには、埋め込み先のコンテンツ幅をウィジェットの最大幅に合わせる、もしくはコンテンツ幅が日程調整カレンダーの状態に合わせて可変となるようにしてください。

反対に、埋め込みウィジェット部分の縦幅を小さくし、スクロールで内容が見えるようにするには、埋め込み先のコンテンツ幅を狭めてください。

Googleタグマネージャー(GTM)を利用したいです。

Callbackを利用して、Googleタグマネージャー側(GTM側)にイベントを返すことは可能です。

ただし、Googleタグマネージャー(GTM)のタグそのものの設置には対応しておりません。

アフィリエイトタグを設置したいです。

Callbackを利用して、アフィリエイトタグを親ページに返すことは可能です。

ただし、以下の点はアフィリエイトサービス側でご確認ください。

  • アフィリエイトタグを親ページ側で受け取る方法にて、アフィリエイトサービス側で成果計測が行えるかどうか

  • アフィリエイトタグを親ページ側で受け取った後、アフィリエイトサービス側でどのように成果計測を行うか

こちらの回答で解決しましたか?