概要

「埋め込み」テンプレートはウィジェットのHTMLをページ内の任意のDOM要素に対して以下のパターンで挿入する事ができます。

  • 置き換え
  • 前に挿入
  • 後ろに挿入
  • 子要素の先頭に挿入
  • 子要素の最後に挿入

接客サービスを作成する場合、接客サービスの新規作成画面右上の「作成」ボタン押下 →「アクションを追加」→「ユーザーに見せる」→「埋め込み」をご選択ください。

埋め込みテンプレートはオプション機能となります。

ご契約内容によってはご利用できない場合もあります。
ご希望の場合は以下の注意事項を確認の上、担当営業にご連絡ください。
アクションのカスタマイズに関してはサポート対象外となります。

以下の設定は自社の責任でご利用ください。

「埋め込み」設定方法について

該当のテンプレートを選択すると、アクションを設定する画面の前に下記のような「埋め込み設定」画面が追加されます。

各項目を設定後、適用して編集とすることで、プレビュー上で確認しながら接客サービスを作ることが可能です。

設定項目 説明
埋め込み先CSSセレクタ 埋め込み先は、CSSのセレクタを指定するか、プレビュー画面から選択をクリックして、要素を選択してください。

指定したCSSセレクタに該当する要素が複数存在する場合は、１つめの要素に対してのみ埋め込みが行われます。
また、1つの接客で複数のCSSセレクタを指定することはできません。
埋め込み方法 「置き換え」「前に挿入」「後ろに挿入」「子要素の先頭に挿入」「子要素の最後に挿入」がお選びいただけます。

プレビュー画面から選択した場合、正確なCSSセレクターが指定できない場合がありますのでお気をつけください。

注意事項

  1. KARTEが対応しているブラウザ のみで動作し、KARTE対応外のブラウザでは埋め込みが動作しません
    お客様に必ず見てほしい内容を埋め込む際は、対応ブラウザにご注意ください。
  2. 画像のサイズが異なる場合など、サイトの表記が崩れてしまう可能性があります
    必ずテスト配信をして、問題がないかをご確認の上で配信ください。
  3. CSSセレクターの指定を間違った場合、サイトに設置されている全ての画像を削除していまうなどの、非常に危険度の高い指定が可能になってしまいます
  4. 指定したCSSセレクタに該当する要素が複数存在する場合は、１つめの要素に対してのみ埋め込みが行われます
    1つの接客で複数のCSSセレクタを指定することはできません。
  5. 埋め込みたい要素・書き換えたい要素のデフォルトのものをサイト内に設置してください
    後述する「埋め込みたい要素・書き換えたい要素のデフォルトのものをサイト内に設置してください」をご参照ください。
  6. サイトリソースの読み込み状況やKARTEサーバー内のトラッキング処理状況によっては、元のHTML要素が表示された後に埋め込みアクションが実行され、サイトの要素がパッと入れ替わったりガクッと落ちるなどの挙動（フラッシュ）を起こす可能性があります
    後述する「フラッシュ対策について」をご参照ください。

埋め込みたい要素・書き換えたい要素のデフォルトのものをサイト内に設置してください
埋め込みたい内容が、「ユーザーに必ず見せたい要素」の場合は、必ずデフォルトの要素を設置し、「置き換え」る形を取ってください。

  • 配信セグメントに該当しない場合や、配信時間外への対応 KARTEの接客サービスは、ターゲット外のユーザー/時間では配信しません
    管理画面上で条件や配信時間の設定を切り替えたり、配信を一次的に停止することも考えられるため、デフォルトを設定しておく必要があります。
  • ネットワークエラー対策
    モバイルユーザーなどネットワークが安定せずタイムアウトするケース、KARTEのサーバー側で問題が起きているケースなどが考えられます。
    KAERTEに問題が起きているかどうかは ステータスページ をご確認ください。

フラッシュ対策について
KARTEのタグは 非同期型 となっておりサイトリソースの読み込みをブロッキングしません。
そのため、サイト自体やKARTEサーバー内の配信処理の状況によってはサイトの要素が表示された後にアクションが実行される場合があります。
その場合、元のHTML要素が表示された後に埋め込みアクションが実行されるとサイトの要素がパッと入れ替わったりガクッと落ちるなどの挙動（フラッシュ）を起こし、ユーザーの体験に悪影響を与える可能性があります。

下記をご参考に、サイトに合わせてカスタマイズして実装してください。

  • Javascriptや、画像のサイズを減らす対策によって、読込までの時間が短縮されます
  • フラッシュが起きるタイミングで、ローディング中を表すトランジションを設定することで、ユーザーのストレスを軽減することが出来ます
  • サンプルコード
    ※ ScriptでjQueryをONにして、サイト内でjQueryを活用可能な状態にする必要があります

html

<div id="krt-wrapper" class="krt-hidden">
    <!-- 接客サービス一式のHTML -->
</div>

css

#krt-wrapper{
    opacity: 1
}
.krt-hidden {
    opacity:0.1 !important;
    filter:alpha(opacity=0.1) !important;
    background:none !important;
}

javascript

$(function (){  
    setTimeout(function () {
        $("#_krt-wrapper__#{shorten_id}_").removeClass("_krt-hidden__#{shorten_id}_");
    }, 1000);
});

FAQ