Web Parts：サイトとの連携設定
Webページを用意する
Web Partsのテンプレート基本設定画面で、サイトのURLを設定する
連携先ページのHTMLに、Web Partsの埋め込みコードを埋め込む
サイトを確認する
Webページを用意する
表示項目などのテンプレート設定が完了したら、Web Partsをサイトと連携するための設定を行います。
Web Partsとサイトを連携するために、何よりもまずは連携先となるページを用意する必要があります。
自社サイトの中のどのページのどの箇所にWeb Partsを埋め込みたいかを事前に決めてください。
※Web Partsは、Basic認証等の制限がかかったページとの連携はできません。
連携するページは制限なしで公開されている必要があります。
※エラー発生防止のため、連携させるサイトの文字コードは「UTF-8」に設定してください。
iframeをご利用の場合も同様に「UTF-8」に設定してください。
例えば、下記のようなページを用意し、「■お申込みフォーム」と「Copyright～」の間にエントリーフォームを埋め込みたい！といったように決めます。
Web Partsのテンプレート基本設定画面で、サイトのURLを設定する
テンプレート設定画面の「サイトのURL」に、Web Partsを埋め込むページのURLを登録してください。
1つのテンプレートにつき、登録可能なURLは5つまでです。
※アプリ側に設定するURLの末尾に「#」がつかないようにしてください。
ページURLの末尾に「#」がある場合、「#」を削除して登録してください。
※iframeの場合、フレーム内ページのURLを登録してください。
連携先ページのHTMLに、Web Partsの埋め込みコードを埋め込む
Web Partsテンプレートから埋め込みコードを確認し、埋め込み先のページHTML内に埋め込みコードを埋め込んでください。
尚、Google Analyticsをご利用の場合は、同じHTML内にトラッキングコードを貼り付けてください。
※作業をどうするか等は、WEB制作担当者とご相談ください。
※埋め込みコードは<body>タグと</body>タグの間に埋め込んでください。
★スマートフォン対応スタイルをご利用の場合
上記の設定の他に、HTML内に下記のmetaタグを追加してください。
<meta name="viewport" content="width=device-width, initial-scale=1″>
タグ追記例
スマートフォン対応スタイルでは、サイト表示端末画面の横幅が1080px以下の際に下記の表示が変わります。
項目の配列が2列表示で設定されていても、強制的に1列で表示
項目名と入力枠を縦ならびで表示
スマートフォン表示イメージ
サイトを確認する
上記の設定内容が相互でチェックされますので、サイト側、アプリ側とも正しく設定してください。
どちらか一方でも設定誤りがあると、正常に表示されません。
正しく設定されていれば、下記のようにフォームが表示されます。
※Web Partsは、埋め込んだページを開くたびに埋め込みコード部分に一時的なHTMLを生成する仕様になっています。