# HubSpotチャット連携の設定

**URL:** https://meta.discourse.org/t/setup-hubspot-chat-integration/128777
**Category:** Integrations
**Tags:** how-to
**Created:** [2019 年 9 月 17 日午前 11:36 UTC](https://meta.discourse.org/t/setup-hubspot-chat-integration/128777 "2019-09-17T11:36:54Z")
**Posts on this page:** 11
**Page:** 1

<div class="post-metadata">

### Author: ![Discourse](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/discourse/32/148734_2.png) [@Discourse](https://meta.discourse.org/u/Discourse)
#### Post date: [2019 年 9 月 17 日午前 11:36 UTC](https://meta.discourse.org/t/setup-hubspot-chat-integration/128777/1 "2019-09-17T11:36:54Z")

</div>

Discourse に CSM を統合しますか？Discourse に HubSpot のチャットを統合する方法を見てみましょう！

1. [HubSpot](https://app.hubspot.com/signup-v2/crm/step/user-info?hubs_campaign=hubspot-livechat-virality&hubs_content=hubspot.com&hubs_medium=virality&intent=conversations&opt_sidebar=livechat-signup) でアカウントを作成します

2. チャットを選択  

3. インターフェースと利用可能時間を好きなようにカスタマイズします  

4. コードをコピーします  

5. [新しいテーマコンポーネント](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682)を作成し、`Common - </body>` タブに貼り付けます。新しいコンポーネントをメインテーマに追加します

6. Hubspot で **確認** を完了してウィジェットを有効にし、ウェブサイトに移動します  

7. 完了です 🎉

---

<div class="post-metadata">

### Author: ![davidkingham](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/davidkingham/32/119528_2.png) [@davidkingham](https://meta.discourse.org/u/davidkingham)
#### Post date: [2020 年 4 月 5 日午前 1:31 UTC](https://meta.discourse.org/t/setup-hubspot-chat-integration/128777/2 "2020-04-05T01:31:18Z")

</div>

こんにちは、Daniella さん。

私はこの統合を 3 つの異なるチャットプロバイダーで試しましたが、見つけられるすべてのリンクを `security policy script src` に追加しても、同じ CSP エラーが発生し続けています。これは Tidio に関するものですが、LiveChat や Pure Chat でも同様の現象が起きています。何が起きているのか、何かアイデアはありますか？

```plaintext
Content Security Policy: The page’s settings blocked the loading of a resource at eval (“script-src”). Source: (function injected(eventName, injectedIntoContentWindow)
{
  let checkRequest;

  /*
   * Frame context wrapper
   *
   * For some edge-cases Chrome will not run content scripts inside of frames.
   * Website have started to abuse this fact to access unwrapped APIs via a
   * frame's contentWindow (#4586, 5207). Therefore until Chrome runs content
   * scripts consistently for all frames we must take care to (re)inject our
   * wrappers when the contentWindow is accessed.
   */
  let injectedToString = Function.prototype.toString.bind(injected);
  let injectedFrames = new WeakSet();
  let injectedFramesAdd = WeakSet.prototype.add.bind(injectedFrames);
  let injectedFramesHas = WeakSet.prototype.has.bind(injectedFrames);

  function injectIntoContentWindow(contentWindow)
  {
    if (contentWindow && !injectedFramesHas(contentWindow))
    {
      injectedFramesAdd(contentWindow);
      try
      {
        contentWindow[eventName] = checkRequest;
        contentWindow.eval(
          "(" + injectedToString() + ")('" + eventName + "', true);"
        );
        delete contentWindow[eventName];
      }
      catch (e) {}
    }
  }

  for (let element of [HTMLFrameElement, HTMLIFrameElement, HTMLObjectElement])
  {
    let contentDocumentDesc = Object.getOwnPropertyDescriptor(
      element.prototype, "contentDocument"
    );
    let contentWindowDesc = Object.getOwnPropertyDescriptor(
      element.prototype, "contentWindow"
    );

    // Apparently in HTMLObjectElement.prototype.contentWindow does not exist
    // in older versions of Chrome such as 51.
    if (!contentWindowDesc)
      continue;

    let getContentDocument = Function.prototype.call.bind(
      contentDocumentDesc.get
    );
    let getContentWindow = Function.prototype.call.bind(
      contentWindowDesc.get
    );

    contentWindowDesc.get = function()
    {
      let contentWindow = getContentWindow(this);
      injectIntoContentWindow(contentWindow);
      return contentWindow;
    };
    contentDocumentDesc.get = function()
    {
      injectIntoContentWindow(getContentWindow(this));
      return getContentDocument(this);
    };
    Object.defineProperty(element.prototype, "contentWindow",
                          contentWindowDesc);
    Object.defineProperty(element.prototype, "contentDocument",
                          contentDocumentDesc);
  }

  /*
   * RTCPeerConnection wrapper
   *
   * The webRequest API in Chrome does not yet allow the blocking of
   * WebRTC connections.
   * See https://bugs.chromium.org/p/chromium/issues/detail?id=707683
   */
  let RealCustomEvent = window.CustomEvent;

  // If we've been injected into a frame via contentWindow then we can simply
  // grab the copy of checkRequest left for us by the parent document. Otherwise
  // we need to set it up now, along with the event handling functions.
  if (injectedIntoContentWindow)
    checkRequest = window[eventName];
  else
  {
    let addEventListener = document.addEventListener.bind(document);
    let dispatchEvent = document.dispatchEvent.bind(document);
    let removeEventListener = document.removeEventListener.bind(document);
    checkRequest = (url, callback) =>
    {
      let incomingEventName = eventName + "-" + url;

      function listener(event)
      {
        callback(event.detail);
        removeEventListener(incomingEventName, listener);
      }
      addEventListener(incomingEventName, listener);

      dispatchEvent(new RealCustomEvent(eventName, {detail: {url}}));
    };
  }

  // Only to be called before the page's code, not hardened.
  function copyProperties(src, dest, properties)
  {
    for (let name of properties)
    {
      if (Object.prototype.hasOwnProperty.call(src, name))
      {
        Object.defineProperty(dest, name,
                              Object.getOwnPropertyDescriptor(src, name));
      }
    }
  }

  let RealRTCPeerConnection = window.RTCPeerConnection ||
                              window.webkitRTCPeerConnection;

  // Firefox has the option (media.peerconnection.enabled) to disable WebRTC
  // in which case RealRTCPeerConnection is undefined.
  if (typeof RealRTCPeerConnection != "undefined")
  {
    let closeRTCPeerConnection = Function.prototype.call.bind(
      RealRTCPeerConnection.prototype.close
    );
    let RealArray = Array;
    let RealString = String;
    let {create: createObject, defineProperty} = Object;

    let normalizeUrl = url =>
    {
      if (typeof url != "undefined")
        return RealString(url);
    };

    let safeCopyArray = (originalArray, transform) =>
    {
      if (originalArray == null || typeof originalArray != "object")
        return originalArray;

      let safeArray = RealArray(originalArray.length);
      for (let i = 0; i < safeArray.length; i++)
      {
        defineProperty(safeArray, i, {
          configurable: false, enumerable: false, writable: false,
          value: transform(originalArray[i])
        });
      }
      defineProperty(safeArray, "length", {
        configurable: false, enumerable: false, writable: false,
        value: safeArray.length
      });
      return safeArray;
    };

    // It would be much easier to use the .getConfiguration method to obtain
    // the normalized and safe configuration from the RTCPeerConnection
    // instance. Unfortunately its not implemented as of Chrome unstable 59.
    // See https://www.chromestatus.com/feature/5271355306016768
    let protectConfiguration = configuration =>
    {
      if (configuration == null || typeof configuration != "object")
        return configuration;

      let iceServers = safeCopyArray(
        configuration.iceServers,
        iceServer =>
        {
          let {url, urls} = iceServer;

          // RTCPeerConnection doesn't iterate through pseudo Arrays of urls.
          if (typeof urls != "undefined" && !(urls instanceof RealArray))
            urls = [urls];

          return createObject(iceServer, {
            url: {
              configurable: false, enumerable: false, writable: false,
              value: normalizeUrl(url)
            },
            urls: {
              configurable: false, enumerable: false, writable: false,
              value: safeCopyArray(urls, normalizeUrl)
            }
          });
        }
      );

      return createObject(configuration, {
        iceServers: {
          configurable: false, enumerable: false, writable: false,
          value: iceServers
        }
      });
    };

    let checkUrl = (peerconnection, url) =>
    {
      checkRequest(url, blocked =>
      {
        if (blocked)
        {
          // Calling .close() throws if already closed.
          try
          {
            closeRTCPeerConnection(peerconnection);
          }
          catch (e) {}
        }
      });
    };

    let checkConfiguration = (peerconnection, configuration) =>
    {
      if (configuration && configuration.iceServers)
      {
        for (let i = 0; i < configuration.iceServers.length; i++)
        {
          let iceServer = configuration.iceServers[i];
          if (iceServer)
          {
            if (iceServer.url)
              checkUrl(peerconnection, iceServer.url);

            if (iceServer.urls)
            {
              for (let j = 0; j < iceServer.urls.length; j++)
                checkUrl(peerconnection, iceServer.urls[j]);
            }
          }
        }
      }
    };

    // Chrome unstable (tested with 59) has already implemented
    // setConfiguration, so we need to wrap that if it exists too.
    // https://www.chromestatus.com/feature/5596193748942848
    if (RealRTCPeerConnection.prototype.setConfiguration)
    {
      let realSetConfiguration = Function.prototype.call.bind(
        RealRTCPeerConnection.prototype.setConfiguration
      );

      RealRTCPeerConnection.prototype.setConfiguration = function(configuration)
      {
        configuration = protectConfiguration(configuration);

        // Call the real method first, so that validates the configuration for
        // us. Also we might as well since checkRequest is asynchronous anyway.
        realSetConfiguration(this, configuration);
        checkConfiguration(this, configuration);
      };
    }

    let WrappedRTCPeerConnection = function(...args)
    {
      if (!(this instanceof WrappedRTCPeerConnection))
        return RealRTCPeerConnection();

      let configuration = protectConfiguration(args[0]);

      // Since the old webkitRTCPeerConnection constructor takes an optional
      // second argument we need to take care to pass that through. Necessary
      // for older versions of Chrome such as 51.
      let constraints = undefined;
      if (args.length > 1)
        constraints = args[1];

      let peerconnection = new RealRTCPeerConnection(configuration,
                                                     constraints);
      checkConfiguration(peerconnection, configuration);
      return peerconnection;
    };

    WrappedRTCPeerConnection.prototype = RealRTCPeerConnection.prototype;

    let boundWrappedRTCPeerConnection = WrappedRTCPeerConnection.bind();
    copyProperties(RealRTCPeerConnection, boundWrappedRTCPeerConnection,
                   ["generateCertificate", "name", "prototype"]);
    RealRTCPeerConnection.prototype.constructor = boundWrappedRTCPeerConnection;

    if ("RTCPeerConnection" in window)
      window.RTCPeerConnection = boundWrappedRTCPeerConnection;
    if ("webkitRTCPeerConnection" in window)
      window.webkitRTCPeerConnection = boundWrappedRTCPeerConnection;
  }
})('abp-request-aic05wltexc', true);. 468b7929-46c3-4249-b516-189e58962157:27:22

```

別の CSP エラー:

```plaintext
Content Security Policy: The page’s settings blocked the loading of a resource at inline (“script-src”). Source: try { if (typeof Navigator.prototype.sendBeacon === 'function') { Navigator.prototype.sendBeacon = function(url, data) { return true; }; } } catch (exception) { console.error(exception); }. script.js:517:22

```

さらに 1 つ（このリンクは既に追加済みです）

```plaintext
Content Security Policy: The page’s settings blocked the loading of a resource at https://widget-v4.tidiochat.com//1_23_3/static/js/widget.a6a6e2b4c2401b7c523f.js (“script-src”). xgahvvrt0kwvb7p6crbxuolt4omnin1u.js:1:12450

```

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [2020 年 4 月 5 日午前 1:37 UTC](https://meta.discourse.org/t/setup-hubspot-chat-integration/128777/3 "2020-04-05T01:37:49Z")

</div>

> [@davidkingham](#):
>
> `widget-v4.tidiochat.com`

その特定の URL をホワイトリストに登録しましたか？エラーメッセージには、通常、どの URL をホワイトリストに登録する必要があるかが明確に示されています。

---

<div class="post-metadata">

### Author: ![davidkingham](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/davidkingham/32/119528_2.png) [@davidkingham](https://meta.discourse.org/u/davidkingham)
#### Post date: [2020 年 4 月 5 日午前 1:44 UTC](https://meta.discourse.org/t/setup-hubspot-chat-integration/128777/4 "2020-04-05T01:44:13Z")

</div>

Jeff さん、ありがとうございます。URL を文字通り取りすぎて、`https://widget-v4.tidiochat.com//1_23_3/static/js/widget.a6a6e2b4c2401b7c523f.js` 全体を使っていました。

これで動作するようになりました。最初の CSP はまだ表示されていますが、動作しているなら、これは無視しても安全でしょうか？

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [2020 年 4 月 5 日午前 1:47 UTC](https://meta.discourse.org/t/setup-hubspot-chat-integration/128777/5 "2020-04-05T01:47:42Z")

</div>

F12 コンソールで CSP エラーが表示される場合は、エラーに含まれるドメインをホワイトリストに追加してください。

---

<div class="post-metadata">

### Author: ![davidkingham](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/davidkingham/32/119528_2.png) [@davidkingham](https://meta.discourse.org/u/davidkingham)
#### Post date: [2020 年 4 月 5 日午前 1:57 UTC](https://meta.discourse.org/t/setup-hubspot-chat-integration/128777/6 "2020-04-05T01:57:27Z")

</div>

最初の、URL が含まれていないものを指しています。Chrome のフレームコンテキストラッパーに関する問題についての警告ですが、奇妙なことにこれは Firefox には表示されるものの Chrome には表示されません。そのため、問題なく動作しているようなので、無視することにします。お手伝いいただきありがとうございます 👍

---

<div class="post-metadata">

### Author: ![dax](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/dax/32/244677_2.png) [@dax](https://meta.discourse.org/u/dax)
#### Post date: [2020 年 5 月 20 日午前 9:31 UTC](https://meta.discourse.org/t/setup-hubspot-chat-integration/128777/7 "2020-05-20T09:31:01Z")

</div>

> [@davidkingham](#):
>
> これは特定の Tidio のものです

私はこの特定のチャットを試したことがありません

> [@davidkingham](#):
>
> LiveChat でも同じことが起こりました

私は昨日 LiveChat をテストしましたが、エラーなく動作しました

> [@Setup LiveChat Chat Integration](https://meta.discourse.org/t/livechat-chat-integration/151985):
>
> Create an account to [Text Accounts | Hire Text Suite](https://accounts.livechat.com/signup) Select the Install LiveChat code manually option Copy the script Visit your site at admin \> customize \> components and click on New component Enter a name for your component and click on Create Select the theme(s) to which you want to add the new component to activate it and click on Edit Code Go to the Common \> \<body\> tab, paste your script and Save Go to the si…

---

<div class="post-metadata">

### Author: ![OdysLam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/odyslam/32/194433_2.png) [@OdysLam](https://meta.discourse.org/u/OdysLam)
#### Post date: [2020 年 11 月 25 日午後 2:07 UTC](https://meta.discourse.org/t/setup-hubspot-chat-integration/128777/8 "2020-11-25T14:07:46Z")

</div>

皆さん、こんにちは。

素晴らしいガイドをありがとうございます！フィードバック調査を追加するためにガイドに従って設定したのですが、HubSpot が分析用リンク（js.hs-analytics/）を頻繁に変更するため、ホワイトリストに新しいリンクを追加し続ける必要が出てきています。

私が発見した、一貫して機能する唯一の解決策は、ポリシー全体を無効にすることですが、あまり安全ではないように思えます。

何か良いアイデアはありますか？

---

<div class="post-metadata">

### Author: ![dax](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/dax/32/244677_2.png) [@dax](https://meta.discourse.org/u/dax)
#### Post date: [2020 年 11 月 25 日午後 5:05 UTC](https://meta.discourse.org/t/setup-hubspot-chat-integration/128777/9 "2020-11-25T17:05:05Z")

</div>

現在、あなたのサイトを閲覧していますが、[カスタマイズ] \> [テーマ] で入力した調査コードが見つかりません。

追記：今すぐ修正されました。CSP を再度有効にしました。問題が発生した場合はお知らせください。

---

<div class="post-metadata">

### Author: ![OdysLam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/odyslam/32/194433_2.png) [@OdysLam](https://meta.discourse.org/u/OdysLam)
#### Post date: [2020 年 11 月 25 日午後 6:37 UTC](https://meta.discourse.org/t/setup-hubspot-chat-integration/128777/10 "2020-11-25T18:37:44Z")

</div>

@Dax さん、こんにちは！

ありがとうございます！どのように修正されたのか、また問題の原因は何だったのか教えていただけますか？

編集：ワイルドカードを追加されたのですね、素晴らしいです！そのボックスの下にコメントを追加して、ワイルドカードも選択肢の一つであることを明記するのがベストだと思います。私もそのような解決策を考えたのですが、バカなことに試すことを思い付きませんでした。

ありがとうございます！

---

<div class="post-metadata">

### Author: ![Jeff\_Bull](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jeff_bull/32/479571_2.png) [@Jeff\_Bull](https://meta.discourse.org/u/Jeff_Bull)
#### Post date: [2025 年 6 月 17 日午前 1:02 UTC](https://meta.discourse.org/t/setup-hubspot-chat-integration/128777/11 "2025-06-17T01:02:56Z")

</div>

HubSpotのようなCRMをDiscourseコミュニティサイトに接続する価値は何でしょうか？