高度なウィジェットインテグレーション

クイックナビゲーション link

• ウェブサイトの要素を使ってウィジェットを呼び出す
• ウェブサイト読み込み時にチャットを自動開始・プレチャットフォームを自動表示する
• 特定のページのみにコンタクトウィジェットを表示する
• 特定のページにコンタクトウィジェットを表示しない
• 特定の国の顧客にのみチャットボタンを表示する

以下のコード例では、LiveAgentのURLとボタンIDを必ず変更してください。

ウェブサイトの要素を使ってウィジェットを呼び出す link

LiveAgentウィジェットのビジュアル機能（フローティングボタン、画像、HTML）を使用せず、サイト上の任意の要素からチャットを開始したりお問い合わせフォームを表示したりしたい場合は、以下の手順に従ってください。

1. チャットまたはコンタクトボタンを作成する

2. ボタンの設定を開き、スタイルを「Custom HTML」に変更する

3. 「Online button」セクションに移動し、HTMLコードを <span></span> に変更してボタンが表示されないようにする

4. ボタンを保存し、以下のような統合コードをコピーする：

   <script type="text/javascript">
   (function(d, src, c) { var t=d.scripts[d.scripts.length - 1],s=d.createElement('script');s.id='la_x2s6df8d';s.async=true;s.src=src;s.onload=s.onreadystatechange=function(){var rs=this.readyState;if(rs&&(rs!='complete')&&(rs!='loaded')){return;}c(this);};t.parentElement.insertBefore(s,t.nextSibling);})(document,
   'https://mycompany.ladesk.com/scripts/track.js',
   function(e){ LiveAgent.createButton('1234abcd', e); });
   </script>

5. 以下のようにコードを修正する（正しいURLとボタンIDを使用すること）：

   <script type="text/javascript">
   var chatButton;
   (function(d, src, c) { var t=d.scripts[d.scripts.length - 1],s=d.createElement('script');s.id='la_x2s6df8d';s.async=true;s.src=src;s.onload=s.onreadystatechange=function(){var rs=this.readyState;if(rs&&(rs!='complete')&&(rs!='loaded')){return;}c(this);};t.parentElement.insertBefore(s,t.nextSibling);})(document,
   'https://mycompany.ladesk.com/scripts/track.js',
   function(e){
     chatButton = LiveAgent.createButton('1234abcd', e);
   });
   </script>

6. 以下のJavaScriptを呼び出すことで、ボタンのクリックをシミュレートできる：

   chatButton.onClick();

   例：

   <h2 class="chat" onclick="chatButton.onClick();">Start chat</h2>

ウェブサイト読み込み時にチャットを自動開始・プレチャットフォームを自動表示する link

この機能は、訪問者がウェブサイトや特定のページを読み込んだ際に、チャットまたはプレチャットフォームをすぐに開始したい場合に便利です。この場合、訪問者はウェブサイトに設置されたチャットボタンをクリックする必要がありません。特定のリンクからウェブサイトにアクセスするだけで、チャットまたはプレチャットフォームが自動的に開始されます（チャットボタンでプレチャットフォームが有効になっているかどうかによって動作が異なります）。

1. 上記の高度なボタン統合の手順1〜5に従う

2. カスタマイズしたチャットボタンを設置したページと同じページに以下のコードを配置する

   <script>
   window.onload = function(e){ 
     var url = new URL(window.location.href);
     var directChat = url.searchParams.get("directChat");
     if (directChat != null) {
       chatButton.onClick();
     }
   }
   </script>

3. コードを挿入したページのリンクに以下のURLパラメータを追加する：

   https://URL-OF-YOUR-WEBSITE/?directChat

以上です。URLパラメータを含む上記のリンクにアクセスすると、チャットが開始されるか、プレチャットフォームが自動的に表示されます。

特定のページのみにチャットボタンまたはお問い合わせフォームを表示する link

これを実現するには、チャット/コンタクトボタン・フォームのJavaScriptコードに条件を追加し、特定のページのみにウィジェットが表示されるようにカスタマイズする必要があります。たとえば、/pricing ページのみにウィジェットを表示したい場合は、以下のような条件をコードに追加できます：

<script type="text/javascript">
(function(d, src, c) { var t=d.scripts[d.scripts.length - 1],s=d.createElement('script');s.id='la_x2s6df8d';s.async=true;s.src=src;s.onload=s.onreadystatechange=function(){var rs=this.readyState;if(rs&&(rs!='complete')&&(rs!='loaded')){return;}c(this);};t.parentElement.insertBefore(s,t.nextSibling);})(document,
'https://mycompany.ladesk.com/scripts/track.js',
function(e){
  if (window.location.pathname.indexOf('/pricing') > 0 ) {
    LiveAgent.createButton('1324abcd', e);
  }
});
</script>

特定のページにチャットボタンまたはお問い合わせフォームを表示しない link

上記の例とは反対に、/pricing、/signup、/login などの特定のページでウィジェットを非表示にしたい場合は、コード内の条件を以下のように変更するだけです：

<script type="text/javascript">
(function(d, src, c) { var t=d.scripts[d.scripts.length - 1],s=d.createElement('script');s.id='la_x2s6df8d';s.async=true;s.src=src;s.onload=s.onreadystatechange=function(){var rs=this.readyState;if(rs&&(rs!='complete')&&(rs!='loaded')){return;}c(this);};t.parentElement.insertBefore(s,t.nextSibling);})(document,
'https://mycompany.ladesk.com/scripts/track.js',
function(e){
  if (window.location.pathname.indexOf('/pricing') < 0 && window.location.pathname.indexOf('/signup') < 0 && window.location.pathname.indexOf('/login') < 0) {
    LiveAgent.createButton('1234abcd', e);
  }
});
</script>

特定の国の顧客にのみチャットボタンを表示する link

このコードは、無料のipapiサービスを使用してIPアドレスから訪問者の位置情報を取得し、ユーザーの国を判定します。返された国コードが「US」であるかどうかを確認し、該当する場合にチャットボタンのコードが実行されてボタンが表示されます。

<script type="text/javascript">
  // Fetch the user's country based on their IP address
  fetch('https://ipapi.co/json/')
    .then(response => response.json())
    .then(responseData => {
      const countryCode = responseData.country;

  // 'US' is the country code for USA
      if (countryCode === 'US') { 
   // chat button code
        (function(d, src, c) {
          var t=d.scripts[d.scripts.length - 1],s=d.createElement('script');s.id='la_x2s6df8d';s.defer=true;s.src=src;s.onload=s.onreadystatechange=function(){var rs=this.readyState;if(rs&&(rs!='complete')&&(rs!='loaded')){return;}c(this);};t.parentElement.insertBefore(s,t.nextSibling);})(document, 'https://mycompany.ladesk.com/scripts/track.js', function(e){ LiveAgent.createButton('1234abcd', e); });
        }
    })
    .catch(error => {
      console.error('Error fetching IP data:', error);
    });
</script>