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">

タグ追記例

smartphone_meta.png

スマートフォン対応スタイルでは、サイト表示端末画面の横幅が1080px以下の際に下記の表示が変わります。

  • 項目の配列が2列表示で設定されていても、強制的に1列で表示
  • 項目名と入力枠を縦ならびで表示

スマートフォン表示イメージ

smartphone_image.PNG

 

サイトを確認する

上記の設定内容が相互でチェックされますので、サイト側、アプリ側とも正しく設定してください。

どちらか一方でも設定誤りがあると、正常に表示されません。

正しく設定されていれば、下記のようにフォームが表示されます。

※Web Partsは、埋め込んだページを開くたびに埋め込みコード部分に一時的なHTMLを生成する仕様になっています。

 

この記事は役に立ちましたか?
2人中1人がこの記事が役に立ったと言っています