Webサイトへのアンケートの埋め込み

Webサイトへのアンケートの埋め込み

お知らせ：当社は、お客様により充実したサポート情報を迅速に提供するため、本ページのコンテンツは機械翻訳を用いて日本語に翻訳しています。正確かつ最新のサポート情報をご覧いただくには、本内容の英語版を参照してください。

概要

Webサイトにアンケートを埋め込むとは、訪問者が別のページやURLに移動せずに回答できるよう、アンケートをWebページに直接挿入することです。Zoho Surveyで生成された短いコードスニペットをコピーしてWebサイトのHTMLに貼り付けることで、そのページを訪問した人がアンケートを表示して回答できるようになります。
  1. アンケートを選択し、［公開］タブに移動します。
  2. ［新しいコレクターを追加］をクリックします。
  3. アンケートを公開するには、公開アクセスセクションの公開リンクオプションで［作成］をクリックします。
  1. iFrameリンクが以下のように表示されます。iFrameリンクをコピーしてWebサイトまたはWebページに埋め込むには、［コピー］をクリックします。

アンケート終了ページのiFrameウィンドウではなくトップウィンドウへのリダイレクト

アンケートをiFrameでWebサイトに埋め込んでいる場合、アンケート終了ページは次のいずれかの方法で表示できます。
  1. iFrame内で開くサンキューページ。
  2. ウィンドウ全体（またはトップウィンドウ）に展開されるサンキューページ。これは、埋め込まれたiFrameコード内のアンケートURLの末尾に「?target=top」を追加することで設定できます。

アンケート送信時の通知

Webサイトでのアンケート送信について通知を受け取るには、次のイベントリスナーコードを親Webサイトに追加します。アンケートが送信されると通知されます。

Window.addEventListener('message', (message) => {
if (message.data && message.data['zohosurvey_respondentStatus'] === 'completed') {
// アンケートが完了しました
}
}) 

iFrameウィンドウの固定とスクロールの回避

iFrameのスクロールを避けるには、現在のページに合わせてアンケートの高さと幅を調整する必要があります。そのために、サイズ変更に使用できる実際のアンケートの高さと幅を渡します。形式は次のとおりです。
 

data = { zohosurvey: {

height : surveyHeight,

width : surveyWidth,

action : 'surveySize'

}}

Webページでメッセージを受信したら、ウィンドウに収まるようにiFrameの高さと幅をカスタマイズする必要があります。iFrameのサイズ調整後、一部の機能が想定どおりに動作しない場合があるため、同様の方法でスクロール位置を処理する必要があります。カスタマイズ用に、次の形式のスクリプトが送信されます。

data = { zohosurvey: { action : 'moveScroll' ,

position : position}}


サンプルコード

このサンプルコードを使用して、iFrameのサイズをカスタマイズできます。
<iframe src='<survey link>' frameborder='0'
style='height:700px;width:100%;' marginwidth='0' marginheight='0' scrolling='auto'
allow='geolocation' id='iframe-id'></iframe>
<script>
var iframe = document.querySelector('#iframe-id'); // iframeのidに応じてidを変更します
function setIframeSize(data){
if(data.zohosurvey ){
if(data.zohosurvey.action == 'surveySize'){
iframe.style.height = data.zohosurvey.height + 'px';
iframe.style.width = data.zohosurvey.width + 'px'
}else if(data.zohosurvey.action == 'moveScroll'){
window.scrollTo(500, iframe.offsetTop + data.zohosurvey.position);} } }
window.addEventListener('message', function(e) {
setIframeSize(e.data);
} , false);
</script>