埋め込みテンプレートはオプション機能となります。ご契約内容によってはご利用できない場合もあります。
ご希望の場合は以下の注意事項を確認の上、担当営業にご連絡ください。

「埋め込み」テンプレートは、ページ内の任意のDOM要素に対して、ウィジェットのHTMLを、「置き換え」「前に挿入」「後ろに挿入」「子要素の先頭に挿入」「子要素の最後に挿入」する事ができます。
基本的にはHTMLが特定の場所に埋め込まれる事以外は、通常の接客サービスと変わらないため、
セグメントや配信ページなどを別途設定することで、ユーザーによって違う表示を出すといったような、ページ自体のパーソナライズ化が可能です。

• 埋め込みによる、画像の置き換えを行いたいときに発生しやすい問題について
  こちらの記事をご参考ください

注意事項

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

埋め込みたい要素・書き換えたい要素のデフォルトのものをサイト内に設置してください。

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

理由

• 配信セグメントに該当しない場合や、配信時間外への対応 KARTEの接客サービスは、ターゲット外のユーザー/時間では配信しません。管理画面上で条件や配信時間の設定を切り替えたり、配信を一次的に停止することも考えられるため、デフォルトを設定しておく必要があります。
• ネットワークエラー対策 imgタグのaltテキストと似ていますが、モバイルユーザーなどネットワークが安定せずタイムアウトするケースが考えられます。KARTEのサーバー側で問題が起きているケースもありますが、その場合は http://status.karte.io を確認してください。
• KARTEが動作しないブラウザ対策 KARTEが動作しないブラウザでは、埋め込み接客サービスは動作せず、何も表示されません。
• アクションが実行されるタイミングによっては、サイトの要素がパッと入れ替わったりガクッと落ちるなどの挙動（フラッシュ）を起こす可能性があります。（フラッシュ対策について）

フラッシュ対策について

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

対策案：

• Javascriptや、画像のサイズを減らす対策によって、読込までの時間が短縮されます。
• フラッシュが起きるタイミングで、ローディング中を表すトランジションを設定することで、ユーザーのストレスを軽減することが出来ます。下記のコードサンプルをご参考ください。

コードサンプル：

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

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

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

- ScriptでjQueryをONにして、サイト内でjQueryを活用可能な状態にする必要があります。
- あくまでも実装例になります。実際には、テンプレート毎に個別のカスタマイズが必要になります。

埋め込みテンプレートについて

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

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

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

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

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