ジャッジの埋め込み

作成した診断コンテンツは、URL公開だけでなく自身のサイトにiframeタグやscriptタグを利用して埋め込むことができます。

埋め込みコードの取得方法

  • > > > ボタン > 画面のvideo_settings ボタンをクリックするとメニューが表示されます。

    を押下することで埋め込みコードを取得できます。

    WordPressの投稿ページにジャッジを埋め込む場合には、をクリックして取得できます。

    埋め込みコードの取得

WordPressに埋め込む場合

投稿ページ内に埋め込みコードを張り付けるだけで簡単にジャッジを設置できます。

  • WordPressの投稿ページに移り、/を入力します。すると下図のようにボタンが表示されますので、押下してブロックの編集モードを切り替えます。

    ワードプレス_カスタムHTMLボタン
    ↓
    ワードプレス_カスタムHTMLブロック

    上記ので取得したコードをブロック内に設置しましょう。

    これだけで簡単に投稿ページ内に診断コンテンツを設置することができます。

埋め込み時の枠線等の装飾

埋め込みコードのfr.setAttribute('style', 'width: 100%;height: 700px;')部分を追記・修正することで、埋め込んだ診断コンテンツの枠線等を設定できます。下記はサンプルです。

  • fr.setAttribute('style', 'width: 100%;height: 700px; border: 1px solid #e0e0e0;border-radius: 5px;') : 薄く細い枠線（デフォルト）

    fr.setAttribute('style', 'width: 100%;height: 700px; border: 2px solid #5e5e5e;border-radius: 5px;') : 濃く太い枠線

    fr.setAttribute('style', 'width: 100%;height: 700px;') : 枠線なし

以下は非推奨の方法です。特段の理由がない限り、上記のWordPress投稿ページ用の埋め込みコードを使用することをお勧めします。

で取得したiframeタグをそのままWordPressに埋め込む場合には設定が必要です。

WordPressのデフォルトの設定では埋め込むことができるメディアはYouTubeなど特定のメディアのみとなっています。下記のいずれかの方法で対応することができます。

1. functions.phpを編集する方法

  • WordPress内のfunctions.phpファイルを編集する方法です。詳しくは、こちらを参照ください。

    ※この方法に詳しくない場合は、自社サイトを管理しているシステム担当者等に相談することをお勧めします。

2. iframe対応プラグインをインストールする方法

  • WordPressのプラグインを利用する方法です。WordPressの管理画面から「iframe」で検索し、iframeの埋め込みを可能にするプラグインをインストールして使用する方法です。

    例えば、「iframe」という名称のプラグインの場合だと[iframe src="https://~"]といったかたちで<>記号を[]記号のショートコードにすることで簡単に設定できます。※プラグインの安全性は自社サイトを管理しているシステム担当者等に相談して確認することをお勧めします。

独自実装のサイトに埋め込む場合

  • で取得したiframeタグを<body>タグ内の任意の位置に設置しましょう。

    コンテンツセキュリティポリシー (CSP)を設定しているサイトの場合、frame-srcにジャッジの埋め込みコードのリソース（https://embed.judge-hub.com/）を許可するよう設定する必要があります。

    チャットボットテンプレートを使用する場合には、frame-srcに加えて、script-srcも許可する必要があります。

    CSPを設定していないサイトの場合は、特段の設定は必要ありません。

埋め込み時の枠線等の装飾

埋め込みコードにstyle属性を追記することで、埋め込んだ診断コンテンツの枠線等を設定できます。下記はサンプルです。

  • <iframe width='100%' height='700px' style='border: 1px solid #e0e0e0;border-radius: 5px;' ~ ></iframe> : 薄く細い枠線（デフォルト）

    <iframe width='100%' height='700px' style='border: 2px solid #5e5e5e;border-radius: 5px;' ~ ></iframe> : 濃く太い枠線

    <iframe width='100%' height='700px' ~ ></iframe> : 枠線なし

ドメイン制限

ジャッジ埋め込み時に、指定したドメインのウェブサイトにのみ埋め込みを許可することができます。第三者のウェブサイトに自身の作成したコンテンツを許可なく埋め込み利用させたくない場合に活用できます。

  • > > 画面に進み、 ボタンを押下。

    埋め込みを許可したいサイトのドメイン名を入力して保存しましょう。ドメイン名には https:// は含まれません。

    埋め込みのドメイン制限

Judgeロゴの非表示

ジャッジ埋め込み時に、ロゴを非表示にすることができます。お客さまのサイトとの親和性を高め、スッキリとした見栄えにしたい際などに効果的です。

  • 利用方法： > > 画面に進み、 ボタンを押下。埋め込み時のオプションをチェックして保存しましょう。

チャットボットの設置方法

対応テンプレートを適用することで、診断コンテンツを簡単にチャットボットとして表示することができます。

診断コンテンツを自社のウェブサイトにチャットボット形式で設置することで、メインコンテンツを邪魔することなくごく自然に診断コンテンツを常駐させることができます。訪問者は素早く自身の求める情報にアクセスできることからサイト利用満足度の向上も期待できます。

チャットボットを表示するには、通常通りの埋め込みコードの設置に加え、埋め込み先のウェブサイトの登録が必要です。下記の手順でチャットボットを設置していきましょう。

埋め込み先のウェブサイトを登録

  • > 画面に進み、ボタンを押下。

    URI登録欄にチャットボットを設置したいウェブサイトのURIを登録して保存します。URIは、https://example.comなどhttps://+ドメイン名のみの形式です。

    ※URLでありませんのでご注意ください。埋め込み先のページURLを登録しても動作しません。

    診断コンテンツの埋め込み先ウェブサイトの登録

埋め込みコードを設置

  • 上述の通常の埋め込みと同様の方法で設置しましょう。

チャットボットの表示タイミングの調整

チャットボット埋め込みコード内の<script src='https://embed.judge-hub.com/script/chatbot-parent-type-a0.js'></script>の部分を下記と置換することで、チャットボットの表示タイミングの調節ができます。

埋め込み先のウェブサイトに馴染むものを試してみましょう。

  • スクロール高さを検知して表示するタイプ（0.5秒でフェードイン）（デフォルト） content_copy
    スクロール高さを検知して表示するタイプ（1.0秒でフェードイン） content_copy
    スクロールを検知せず常時表示するタイプ content_copy

チャットボットの高さ位置の調整

埋め込みコード内に記載されているinset属性を編集することで、待機状態時の高さ位置を調節できます。ウェブサイトの画面右下に既存のボタン等を配置している場合に重ならないよう調節できます。下記はサンプルです。

  • inset: auto 10px 0px auto; : 画面下に隙間なく配置する場合

    inset: auto 10px 80px auto; : 画面下から80px上の位置に配置する場合

チャットボットの待機状態のアニメーションの調整

埋め込みコード内に記載されている<style> ~ </style>部分を下記と置換することで、待機状態時のアニメーションを調節できます。下記はサンプルです。

  • 上下にゆらゆら（デフォルト） content_copy
    左右にゆらゆら content_copy
    アニメーションなし content_copy
keyboard_double_arrow_right NEXT