概要

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

例）ページ内PickUpに特集バナー（LOOKBOOK）を挿入

補足

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

ご契約内容によってはご利用できない場合もあります。 ご希望の場合は以下の注意事項を確認の上、担当営業にご連絡ください。

同様の機能を有したサービス（KARTE Blocks）が御座います。以下、ご参照いただき合わせてご検討ください。
※ KARTE Blocksとは？

利用方法

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

アクション設定

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

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

プレビュー画面から選択した場合、正確なCSSセレクタが指定できない場合がありますのでお気をつけください。
CSSセレクタの指定方法については、こちらのサポートサイトをご参考ください。

※Chromeのデベロッパーツールを使ってCSSセレクタを取得する

注意事項

KARTE対応ブラウザ

KARTEが対応しているブラウザ のみで動作します。KARTE対応外のブラウザでは、埋め込みが機能しません。お客様が必ず確認していただきたいコンテンツを埋め込む場合は、対応ブラウザをご利用ください。

サイト表記の問題

画像のサイズなどが異なる場合、サイトの表記が崩れる可能性があります。配信前に必ずテストを行い、問題がないかをご確認ください。

CSSセレクターの指定

CSSセレクターを間違えると、非常に危険な操作が可能になります。例えば、間違った指定ではサイトに設置されている全ての画像を削除することがあります。

埋め込み要素

指定したCSSセレクタに複数の要素が存在する場合、最初の要素のみが埋め込まれます。1つの接客で複数のCSSセレクタを指定することはできません。

埋め込みたい要素や書き換えたい要素のデフォルトをサイト内に設置してください。特に、「ユーザーに必ず見せたい要素」を埋め込む場合は、デフォルトの要素を必ず設置し、置き換える形で使用してください。

フラッシュ対策

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;
    background:none !important;
}

javascript

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