• 文字サイズ変更
  • S
  • M
  • L
  • No : 179
  • 公開日時 : 2026/03/20 00:32
  • 更新日時 : 2026/05/19 17:16
  • 印刷

“HTML編集モード” で「web接客コンテンツ」を作成したい

カテゴリー : 

回答

本記事では、b→dashで「HTMLメール」を「HTML編集モード」で作成する方法について紹介しています。
作成手順は、大きく下記の4つです。

　1. テンプレートを選択する
　2. web接客の内容を編集する
　3. プレビューで確認する

各手順の詳細は、以下をご参照ください。

※ GUI編集モードで作成する場合は「”GUI編集モード” で「HTMLメール」を作成したい」をご参照ください

テンプレートを選択する

「web接客」をクリックします

「web接客を作成する」をクリックします

右上にある「新規作成」をクリックします

「web接客」を選択し、「適用」をクリックします

「使用するテンプレート」をクリックします

作成したいweb接客のイメージに近いテンプレートを選びましょう！
「HTML編集モードでコンテンツを作成」を選択し、「適用」をクリックします

エディター画面にソースコードが表示されるので、こちらでweb接客を編集します

web接客の内容を編集する

今回はテンプレートを使って以下のweb接客を作成する例を基に、説明していきます！

「閉じるボタン」を追加する

任意の箇所に下記のコードを入力します
 <!-- 閉じるボタン Start -->
  <object id="close-button" button-type="1" width="30" height="30" x="285" y="-15" style="display: none;"></object>
  <!-- 閉じるボタン End -->

以下のように「閉じるボタン」が反映されます

値を差し込む

差し込みたい箇所にカーソルを合わせ「データ挿入」をクリックします

「データファイル」を選択し、「適用」をクリックします

データファイルが出てこない？？
差し込みで利用するデータファイルは、セグメントで利用しているデータファイルである必要があります。b→dashへのデータ連携と取り込みだけを行ったファイルは表示されないので注意しましょう。
「差し込みたいカラム」を選択し、「適用」をクリックします

web接客コンテンツに差し込みデータ（氏名）が差し込まれます

以下のように差し込みデータ（名前）が反映されます

今回は値として「氏名」を差し込みましたが、カラムにある他の値も差し込むことができます！

日付を差し込む

差し込みたい箇所にカーソルを合わせ「日付挿入」をクリックします

「表示形式」「プレビュー」を選択し、「適用」をクリックします

日付が差し込まれます

以下のように差し込みデータ（日付）が反映されます

閲覧人数を差し込む

差し込みたい箇所にカーソルを合わせ「閲覧人数挿入」をクリックします

「閲覧対象」「閲覧人数計測対象ページ」「集計タイミング」「最低閲覧人数」を選択し、「適用」をクリックします

この設定をすることでweb接客の中に閲覧人数を表示することができます！
閲覧人数が差し込まれます

以下のように差し込みデータ（閲覧人数）が反映されます

画像を差し込む

差し込みたい箇所にカーソルを合わせ「画像」をクリックします

「画像」を選択し、「適用」をクリックします

画像が差し込まれます

以下のように差し込みデータ（画像）が反映されます

これで内容の編集は完了です！
web接客コンテンツには動画ファイルを差し込むこともできます
上記の紹介では出てきていませんが、web接客コンテンツには、コンテンツボックスにアップロードしている動画ファイルを差し込むこともできます。差し込む動画ファイルは、以下の仕様及び推奨値を満たしている必要がありますので、利用前にご確認ください。

 

●拡張子：「mp4」のみ可能
●大きさ：横幅が300pxまでの場合、サイズの変更なくそのまま表示されますが、横幅が300pxより大きい場合、アスペクト比を固定し横幅を300pxのサイズに変更したものが差し込まれます
●サイズ：1~5MBを推奨しております（サイズが大きい場合、ポップアップを表示した際に動画表示に時間を要してしまうため、できるだけサイズの小さなファイルの利用を推奨します）

 

※コンテンツボックスに動画ファイルをアップロードする方法はこちらを参照ください

web接客上のリンクをクリックした際に「新しいタブ」でリンク先ページを開きたい

ユーザーが、web接客に挿入しているリンクをクリックした際に、遷移先のwebページを「新しいタブで開く」ように設定するためには、下記のサンプルコードを記載する必要があります。
「新しいタブで開く」機能を実装したい場合は、ご参照ください。

<a href="https://test-1111.com" target="_blank" rel="noopener noreferrer">こちら</a>

プレビューで確認する

「プレビュー」をクリックします

プレビューが表示されるので、差し込みなどが表示されているかを確認します

プレビューの確認ができたら、「保存」をクリックします

「名前」を入力し、「保存」をクリックします

web接客一覧に表示されます

以上でweb接客（HTML）の作成は完了です！
 

TOPへ