Expert Touchpoints のブランド設定方法
目的：
Touchpoints を埋め込む製品サイト、ECサイト、マーケティングサイトなどの外観に合わせて、見た目やデザインを統一します。
ブランド設定に必要なもの
Touchpoints のブランド設定を行うには、以下の準備が必要です：
-
Expert サイトへの管理者アクセス権限
-
CSS に関する基本的な知識
-
Touchpoints で利用可能な対象要素（セレクタ）の知識
※すでに本番環境に展開されている Touchpoint を編集する場合は、まずテスト用の別の Touchpoint を作成し、そこでブランド設定の確認を行ってください。CSS の調整が完了した後で、本番用の Touchpoint に反映します。
手順 1：テスト用 Touchpoint の作成と埋め込み
-
[Site tools] > [Dashboard] > [Integrations] > [Touchpoints Management] にアクセスします。
-
作成したい Touchpoint のタイプを選択します。
（各 Touchpoint の種類と用途については別途ガイドを参照） -
フォームに必要項目を入力します。
「Custom CSS」欄は任意ですが、ブランド設定を行う際に使用します。 -
テストが可能なホスト名を「Host name」欄に指定します。
（ブランド設定の確認に利用します） -
Touchpoint を保存します。
-
作成された Touchpoint の埋め込みコードをコピーし、テスト環境の任意のWebページに貼り付けます。
→ この時点ではまだブランド設定はされていませんが、動作は確認できます。
※テスト環境と Touchpoint は、CSS を調整する間利用し続けるようにしてください。
手順 2：CSS によるブランド設定
-
Touchpoints で使用可能な HTML 要素やクラスセレクタを確認し、
任意のテキストエディタを使用して CSS を作成します。 -
手順 1 で作成した Touchpoint を開き、「Custom CSS」欄に CSS を貼り付けます。
-
変更を保存します。
-
テスト環境に埋め込んだ Touchpoint を確認し、ブランド設定が反映されていることを確認します。
-
必要に応じて CSS を調整し、理想的なデザインが得られるまで上記の手順を繰り返します。
補足事項
-
ブランド設定にはある程度の調整作業が必要となる場合があります。
-
一度完成した CSS は、他の Touchpoint にも再利用可能です。