パーソナライズドウィジェットの表示をカスタマイズする

パーソナライズドウィジェットの表示をカスタマイズするパーソナライズドウィジェット機能では、実際に表示させるコンテンツをカスタマイズすることができます。パーソナライズドウィジェットの表示をカスタマイズするパーソナライズドウィジェットにCSSを適用する具体的なカスタマイズ方法ウィジェットパーツ・パーソナライズドウィジェットタグの構成注意事項パーソナライズドウィジェットの表示をカスタマイズするパーソナライズドウィジェットにCSSを適用するCSSは後に読み込まれたものが優先して反映されます。そのためWEB＞パーソナライズドウィジェット＞タグで取得できる、パーソナライズドウィジェットタグの内容にあるweb_widget.cssの後にタグや、cssを指定して上書きすることで、ウィジェットの表示をカスタマイズできます。CSSが反映される優先順位については、パーソナライズドウィジェット機能ではなく、ブラウザの仕様となります。追加したCSSが反映されない等のトラブルについては、ブラウザの仕様とタグ内にあるweb_widget.cssをご確認ください。パーソナライズドウィジェットタグの例スタイルを適用した例'class='smpWebWidget'smpform.loadContents('','ポップアップフォームの横幅を50%に変更*/.ss-popup-form-area{width:50%;}'class='smpWebWidget'smpform.loadContents('','この例では、ポップアップフォームの横幅が50%に変更されます。具体的なカスタマイズ方法ウィジェットパーツの全体のスタイルを調整したいウィジェットパーツの用途・種別ごとにこれらのクラスが付与されますので、パーソナライズドウィジェットへスタイルを指定する際などには、こちらをご利用ください。ポップアップ埋め込みHTMLページ.ss-popup-html-area.ss-popup-area.ss-embed-html-area申込フォーム.ss-popup-form-area.ss-popup-area.smpForm.smpFormパーソナライズドウィジェットには複数のウィジェットパーツを設定することができます。/*ポップアップHTMLの幅を100px～15%に*/.ss-popup-area{min-width:100px;}.ss-popup-html-area{max-width:15%;}ポップアップの最小幅については現在のweb_widget.css側でss-popup-areaにフォーム・HTML共通で指定していて、ポップアップの最大幅については、HTMLのみss-popup-html-areaで指定する形となっているため、2021年3月現在、ポップアップHTMLの幅を変更する際には、上記のようにご対応ください。この他にもHTMLページ、申込フォームどちらにも共通で指定するものについては、ss-popup-areaクラスをご利用ください。/*ポップアップHTMLの幅を15%に*/.ss-popup-area{min-width:15%;}.ss-popup-html-area{max-width:15%;}このように記述した場合は、ポップアップHTMLの横幅が常に15%になります。ウィジェットパーツのボタン、画像、タイトルなどの細かい要素を調整したい各項目を設定する方法については、ウィジェットパーツ、埋め込みフォームを利用するをご確認ください。（埋め込み・ポップアップ）HTMLの場合項目名説明タイトル文（smp-widget-headerに含まれます）のような形式になります。タイトル文のみを指定する場合は、.smp-widget-title-textをご利用ください。説明文（smp-widget-contentに含まれます）のような形式になります。説明文のみを指定する場合は、.smp-widget-body-textをご利用ください。ボタンテキスト（smp-widget-contentに含まれます）のような形式になります。.smp-widget-buttonで指定することで、スタイルを変更できます。画像（smp-widget-contentに含まれます）'のような形式になります。.smp-widget-imageで指定することで、のスタイルを変更できます。のスタイルを変更する場合は、.web-widget-imageをご利用ください。例として、このように記述することで、ボタンの横幅が128pxになります。/*ポップアップHTMLのボタンの横幅を128pxに*/.ss-popup-html-area.smp-widget-button{width:128px;}またこのように記述した場合は、/*ヘッダーを5pxに*/.ss-popup-form-area.smp-widget-header{height:5px;}ポップアップフォームを閉じた時に表示が残る、ヘッダーの部分の高さが5pxになります。（埋め込み・ポップアップ）申込フォームの場合フォーム、ボタンなどの構成は埋め込みフォームと同じですので、埋め込みフォームのカスタマイズをご確認ください。フォームの項目については基本項目設定や、事前アンケートをフローに紐づけることで設定できます。ウィジェットパーツ・パーソナライズドウィジェットタグの構成ウィジェットパーツの構成HTMLページの場合ウィジェットパーツ登録/編集画面でテンプレート1・タイトル・説明文・画像・ボタンのものを選択した場合、基本的に下記のような形で出力されます。※基本的な構成は以下のものとなりますが、ウィジェットパーツ設定のテンプレート選択、入力の有無により、項目の表示順や要素の有無は変わります。*固有のidが設定されます*用途・種別に応じたクラスが設定されます×*「閉じる」ボタンです。埋め込み/HTMLでは存在しません。*常に出力されます*説明文を設定しなかった場合、出力されません　*画像を設定しなかった場合、出力されません*ボタンテキストを設定しなかった場合、出力されませんタイトルの要素、説明文の要素、画像の要素、ボタンの要素の中にお客様が設定された要素が入るため、詳細を調整する際には、ブラウザの開発者ツール等でご確認ください。申込フォームの場合ポップアップ/申込フォームの場合下記のような形式で出力されます。×*閉じるボタン*埋め込みフォームの要素が入りますフォーム、ボタンなどの構成は埋め込みフォームと同じですので、埋め込みフォームのカスタマイズをご確認ください。埋め込み/申込フォームの場合埋め込みフォームと同じ構成ですので、埋め込みフォームのカスタマイズをご確認ください。フォームの項目については基本項目設定や、事前アンケートをフローに紐づけることで設定できます。パーソナライズドウィジェットタグの詳細パーソナライズドウィジェットタグは以下のような構成になっています。パーソナライズドウィジェットタグの例*(1)*(2)'class='smpWebWidget'*(3)smpform.loadContents('','資料を請求する')*(4)パーソナライズドウィジェット用JSライブラリ:　(1)　ウィジェット情報取得＆ウィジェット送信処理を実行するライブラリを読み込みます。パーソナライズドウィジェット用デフォルトCSS:　(2)　デフォルトのスタイルを定義したCSSを読み込みます。ウィジェットパーツのコンテンツ展開領域:　(3)　パーソナライズドウィジェットごとに固有なIDで特定された、ウィジェットパーツ表示領域　実際の表示位置はウィジェットパーツの設定により変化します。パーソナライズドウィジェット出力実行メソッド:　(4)　ウィジェットを描画するメソッドを実行し、(3)のエリアにウィジェットを出力します。(2)の部分を除外することでデフォルトのスタイルを消すことができます。また(2)以降にタグやCSSを記述することで、外観をカスタマイズできますのでご活用ください。注意事項注意上記の記述にあります例は、あくまでサンプルですので、そのままの利用はお控えください。構築されるWebページに合わせて利用するようお願いいたします。