<!DOCTYPE html>
<html>
<head>
<script>
function loadSMPForm(url, embedded_code, errorStr){
const s = document.createElement('script');
s.src = url+'/static/js/embedded_form.js'
s.chaset = 'utf-8';
s.onload = function(){ smpform.loadForm(embedded_code, url) };
s.onerror = function(){
document.getElementById(embedded_code).innerHTML = errorStr
}
const l = document.createElement('link');
l.rel = 'stylesheet';
l.href = url+'/static/css/embedded_form.css';
document.body.appendChild(s);
document.body.appendChild(l);
}
</script>
</head>
<body>
<script>
loadSMPForm(
'https://demo-example.smktg.jp',
'embc28d77d5-xxxx-xxxx-xxxx-2b92b318a3f0',
'恐れ入りますが、現在フォームのメンテナンス中です'
)
</script>
<div id="embc28d77d5-xxxx-xxxx-xxxx-2b92b318a3f0" class="smpForm">Now Loading...</div>
</body>
</html>SMPにアクセスできず埋め込みフォームを表示できない場合に代替メッセージを表示できるようにする
SMP本体がメンテナンスなどによってアクセスができなくなった場合、埋め込みフォーム構築用のスクリプトが読み込めなくなります。
その場合、埋め込みフォームタグをそのまま設置しているだけでは、画面上に何も表示しませんが、スクリプトの読み込み方法をカスタマイズすることで代替メッセージを表示することができます。以下に、そのサンプルを提示します。
スクリプトの例
HTML の <head> タグに埋め込みフォーム構築用の JavaScript ファイル・CSS ファイルの読み込みを行い、フォームを読み込む処理を行うスクリプトを記述しています。
このスクリプトを、 <body> タグで読み込んでおります。引数の順番として、
-
SMPのURL
-
埋め込みフォーム設定時に生成された一意のID( embXXXXX-XXXX-XXXX-XXXXX と emb で始まる文字列です)
-
エラー時に表示する文言
これらを指定していただくと、エラー時に ID に紐づく <div> タグの中身にエラー文言が表示されます。
正常に通信ができているときは埋め込みフォームが表示されます。
サンプルのように、 <div> タグの中に読込中を表すような文言を挿入することで、利用者にフォームを読み込んでいることを示すことが可能です。
注意
上記プログラムははサンプルですので、そのままの利用はお控えください。構築される Web ページに合わせて利用するようお願いいたします。