SMPにアクセスできず埋め込みフォームを表示できない場合に代替メッセージを表示できるようにする

SMP本体がメンテナンスなどによってアクセスができなくなった場合、埋め込みフォーム構築用のスクリプトが読み込めなくなります。

その場合、埋め込みフォームタグをそのまま設置しているだけでは、画面上に何も表示しませんが、スクリプトの読み込み方法をカスタマイズすることで代替メッセージを表示することができます。以下に、そのサンプルを提示します。

スクリプトの例
<!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>

HTML の <head> タグに埋め込みフォーム構築用の JavaScript ファイル・CSS ファイルの読み込みを行い、フォームを読み込む処理を行うスクリプトを記述しています。

このスクリプトを、 <body> タグで読み込んでおります。引数の順番として、

  1. SMPのURL

  2. 埋め込みフォーム設定時に生成された一意のID( embXXXXX-XXXX-XXXX-XXXXX と emb で始まる文字列です)

  3. エラー時に表示する文言

これらを指定していただくと、エラー時に ID に紐づく <div> タグの中身にエラー文言が表示されます。

正常に通信ができているときは埋め込みフォームが表示されます。

サンプルのように、 <div> タグの中に読込中を表すような文言を挿入することで、利用者にフォームを読み込んでいることを示すことが可能です。

注意
上記プログラムははサンプルですので、そのままの利用はお控えください。構築される Web ページに合わせて利用するようお願いいたします。

検索結果 ""

    検索結果がありません ""