フレックスエディタで作成したアクションが、意図した通りに表示されない、動作しない場合の確認手順を説明します。
お困りの内容に合わせて、該当する項目をご確認ください。

はじめに確認すること

以下の3点について、お困りの内容に関わらずご確認ください。

アクションを保存する

編集だけでは、配信中のアクションに反映されません。
配信中のアクションに編集内容を反映するには、エディタ右上の ［保存］ > ［上書き保存］ をクリックします。

画面を再読み込みする

「ブラウザで確認」モードで確認している場合は、ページを再読み込みします。
再読み込みされるまで、編集内容が表示に反映されません。

アプリの場合は再起動する

KARTE for App で配信している場合は、アプリを完全に終了（タスクキル）してから開き直します。
アプリの画面を閉じるだけでは、表示済みのアクションが残る場合があります。
※iOSではバックグラウンドへ遷移しても接客サービスが保持され、Androidでは接客サービスがリセットされます。詳しくは「AndroidとiOSで、ポップアップの接客配信時、クリック・閉じる数に乖離がある」をご確認ください。

お困りの内容から探す

お困りの内容該当項目
既存アクションを変換後にデザインが崩れた1. 既存アクションから変換すると表示が崩れる
要素が想定より大きい、または小さい/閉じるボタンだけが離れて表示される2. 幅や配置が崩れる
閉じるボタンをクリックできない/ほかの要素の背面に表示される3. 閉じるボタンをクリックできない
プレビューでは正しく表示されるが、配信先のサイトでは崩れる4. プレビューと配信先で表示が異なる
リンクをクリックしても遷移しない/新しいタブで開かない5. リンクをクリックしても遷移しない
PCでは正しく表示されるが、スマートフォンの実機では文字がはみ出す6. スマートフォンの実機でのみ文字がはみ出す
保存できない/保存をクリックしても完了しない7. 保存できない
アクションが表示されるまでに時間がかかる8. 表示に時間がかかる
iPhoneでのみ画像が表示されない※参考：「フレックスエディタのよくある質問」

1. 既存アクションから変換すると表示が崩れる

ご注意ください

カスタマイズしたHTML/CSS/JavaScriptは変換の対象外です。 対応には個別のカスタマイズが必要になるため、サポート対象外となります。

考えられる原因

元のアクションのHTMLやCSSが複雑な構造になっているほど、表示は崩れやすく、元のアクションと同じ見た目にならない場合があります。

表示崩れを軽減する方法

以下をお試しください。

  • 変換前に、閉じるボタンの指定を削除する

    元アクションに karte-close の指定がある場合、変換時に閉じるボタンとして扱われ、レイアウトが崩れます。

    HTMLタブを開き、class名に"karte-close”がないか確認し、削除してから再度変換をお試しください。

変換機能での変換が難しい場合

以下のご対応をお願いいたします。

  • 近い構成のテンプレートから作り直す

    フレックスエディタ対応のアクションテンプレートから、構成が近いものを選びます。クリック時の動作は「カスタムイベント機能」で設定できます。

  • スライダー形式は、対応するテンプレートを利用する

    「【モバイル向け】スライド ※スワイプ対応有」などの標準テンプレートは構造が複雑なため、変換すると崩れます。フレックスエディタに対応した「スライド01」などをご利用ください。

※参考：
「既存アクションをフレックスエディタに変換する」
「フレックスエディタでスライダー形式（カルーセル）のポップアップを作成する」

2. 幅や配置が崩れる

考えられる原因

複数の箇所で幅を指定している場合に発生します。
たとえば、CSSカスタマイズで「画面幅の36%」を指定し、レイアウト設定で「最大600px」を指定しているケースです。
この場合、それぞれの指定が競合します。その結果、閉じるボタンだけが離れて表示されたり、要素の一部が画面内に表示されなくなります。

対応手順

幅を指定する箇所を1つにまとめます。

  1. レイアウト設定で幅を指定していないか確認します。

  2. CSSカスタマイズで幅を指定していないか確認します。

  3. 共通コード設定で幅を指定していないか確認します。

  4. 複数の箇所で指定している場合は、1箇所を残して削除します。

補足

モーダルの幅の上限のみを指定し、内側の要素は横幅を「最大幅（100%）」に設定すると、幅を指定する箇所が1つになり、表示が安定します。

※参考：「フレックスエディタのレイヤー構造（モーダル/レイアウト/エレメント）とレイアウト化」

3. 閉じるボタンをクリックできない

考えられる原因

フレックスエディタで作られたアクションは、HTMLとCSSの仕様に準拠して描画されます。
絶対配置を設定された要素は、後から描画されたものが前面に表示されます。
そのため、レイヤー欄の順番とプレビュー上の重なりが一致しない場合があります。

対応手順

  1. レイヤーで、閉じるボタンの位置を確認します。

  2. 三点リーダーをクリックし、［上へ移動］または［下へ移動］で順番を調整します。

  3. 閉じるボタンに絶対配置を設定している場合は、レイヤー構造において、閉じるボタンよりも前面にあるエレメントよりも下部へ移動させることで前面に表示されます。

補足

絶対配置が設定されていない要素は、レイヤーの順番通りに前後関係が決まります。絶対配置が設定されている場合のみ、プレビュー上の重なりとレイヤー欄の順番が逆になります。 また、絶対配置時にはz-index : 1を付与しております。

※参考：「フレックスエディタのよくある質問」

4. プレビューと配信先で表示が異なる

ご注意ください

CSSカスタマイズはサポート対象外となります。

考えられる原因

配信先のサイトの設定が、アクションの表示に影響している場合があります。

対応手順

  1. 別のページで同じアクションを配信し、再現するか確認します。

    別のページで正しく表示される場合は、配信先のページに起因する可能性があります。手順2以降を確認します。

    どのページでも崩れる場合は、アクションの設定に要因がある可能性が高いです。

  2. 動画やSNSの埋め込みが表示されない場合は、配信先のサイトに、外部コンテンツの読み込みを制限する設定が入っている場合がありますのでブラウザのデベロッパーツール（開発者ツール）でConsoleやNetworkタブでエラー状況を確認してください。

  3. 余白や間隔のみが異なる場合は、CSSカスタマイズで調整します。

5. リンクをクリックしても遷移しない

考えられる原因

「新しいタブ」の設定は、配信環境によって動作が異なります。

配信環境「新しいタブ」ON「新しいタブ」OFF
ブラウザ（PC・スマートフォン）新しいタブでリンク先を開きます同一タブでリンク先に遷移します
Native SDKが展開するWebViewクリック後もアクションを表示したままにしますクリック後にアクションを非表示にします
KARTE for Appで自社WebViewに配信されるものWebViewの実装が対応している必要があります同左


アプリでは、「新しいタブ」はタブを制御する設定ではありません。
クリック後にアクションを閉じるかどうかを決める設定として動作します。

対応手順

  1. アプリで確認している場合は、アプリを完全に終了してから開き直します。

  2. 上の表をもとに、「新しいタブ」の設定を切り替えます。

  3. 自社で管理するWebViewで開かない場合は、アプリの開発担当者に確認します。

    WebViewの実装が target="_blank" に対応している必要があります。

  4. リンク先URLに %3D や %2F が含まれている場合は、「URLをデコード」をオンにします。

補足

共通コード設定でリンクの設定を後から書き換える処理を入れている場合、正しく動作しません。 リンクの設定は、プロパティエディタから行ってください。

※参考：
「フレックスエディタのクリック時の動作」
「フレックスエディタのアプリ配信時の注意点」

6. スマートフォンの実機でのみ文字がはみ出す

ご注意ください

CSSカスタマイズによる調整はサポート対象外となります。

考えられる原因

端末の文字サイズ設定が影響しています。
ユーザーが端末側で文字サイズを拡大している場合、ボタン内の文字がはみ出したり、要素が画面幅を超えたりします。
Android端末で発生しやすい事象です。

対応手順

  1. ボタンのプロパティエディタで「折り返しする」をオンにします。

  2. 解消しない場合は、共通コード設定に以下のCSSを追加します。

* {
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

補足

端末やOSによっては、上記の指定でも文字サイズが変わります。 文字サイズ設定は端末のアクセシビリティ機能でもあるため、サイズを固定するのではなく、文字量が増えても崩れにくいデザインを推奨しています。

※参考：「フレックスエディタのよくある質問」

7. 保存できない

考えられる原因

共通コード設定やコードブロックに構文エラーがある場合、保存できません。
構文エラーがある場合は、該当箇所に赤い波線とエラーメッセージを表示します。

ご注意ください

構文エラーがある場合は、エラーを表示する前の状態がプレビューと保存に適用されます。 編集内容が反映されないときは、エラーを表示していないかご確認ください。

対応手順

  1. エラーを表示している箇所を修正します。

  2. 「保存しました」の表示が出てから、再度右上の保存ボタンをクリックします。

    コードを貼り付けた直後は、コードの解析が完了していない場合があります。

  3. KarteActionContext を記述している場合は、削除します。

    ※型は自動で付与されるため、記述は不要です。

  4. コードを編集していない場合は、ページを再読み込みしてから再度保存します。

※参考：「フレックスエディタの共通コード設定によるCSS・JavaScriptでのカスタマイズ」

8. 表示に時間がかかる

考えられる原因

画像のファイルサイズが大きい場合に発生します。
KARTEでは画像の容量やサイズに上限を設けていません。ファイルサイズが大きいほど、読み込みに時間がかかります。
※詳細は「接客サービスを作成する際の画像に容量やサイズの制限はありますか？」をご確認ください。

対応手順

  1. 画像を圧縮し、ファイルサイズを軽量化します。

  2. 表示するサイズに合わせて、画像をリサイズします。

    ※ 非推奨例：横幅600pxで表示する画像に、横幅2,000pxの画像を利用

解決しない場合の問い合わせ方法

上記で解決しない場合は、チャットサポートへお問い合わせください。
※詳細は「チャットサポートのガイドライン」をご確認ください。

お問い合わせ時に以下の情報をあわせてご共有いただくと、確認がスムーズです。

お問い合わせ時にご共有いただきたい情報

  • 接客サービスID、または編集画面のURL

  • 事象が発生しているページのURL

  • 事象が発生している端末とブラウザ、またそのバージョン

  • スクリーンショット ※正しく表示されている状態と崩れている状態

  • 事象が発生し始めた時期

  • 「はじめに確認すること」および該当項目で実施した内容