Блог

Главная - Вопросы по программированию - Как мне добавить чат HubSpot в приложение react js?

Как мне добавить чат HubSpot в приложение react js?

#reactjs #chat #gatsby #hubspot

#reactjs #Чат #gatsby #hubspot

Вопрос:

Я пытаюсь добавить наш чат HubSpot на наш веб-сайт, который мы создали с помощью React и Gatsby, и нас попросили вставить следующее в тег body в index.html файл:

 <script type="text/javascript" id="hs-script-loader" async defer src="//js.hs-scripts.com/insertnumbers"></script>

Проблема в том, что мы не загружаем нашу общую папку на веб-сайт. HTML-файл находится в общей папке.

Как мы можем обойти это? Я думал о компоненте React, но я не уверен, с чего начать. Вы можете помочь?

Ответ №1:

обновление 2022

С момента выпуска Script компонента Gatsby (на базе Partytown) стало намного проще добавлять сторонние скрипты. Просто:

 import React from "react"
import { Script } from "gatsby"

function YourPage() {
  return <Script src="https://my-example-script" />
}

export default YourPage

Используйте <Helmet> компонент. Все, что заключено внутри, помещается в <head> тег, в этом случае будет работать для вашего варианта использования, несмотря на то, что его нет в <body> .

 const YourPage= props => {
  return <Layout>
    <Helmet>
      <script type="text/javascript" id="hs-script-loader" async defer src="//js.hs-scripts.com/insertnumbers"/>
    </Helmet>
  </Layout>;
};

export default YourPage;

Комментарии:

1. Хорошо, это было проще, чем я думал. Спасибо! Вы бы порекомендовали создать компонент, а затем импортировать его на страницу, на которой я хочу, чтобы отображался чат, или заголовок будет на всех страницах по умолчанию?

2. В зависимости от ваших потребностей, в идеале, я бы рекомендовал использовать его только там, где это необходимо. Если проблема решена, пожалуйста, примите ответ, чтобы закрыть проблему.

3. Хорошо, круто. Я скоро углублюсь в это и скоро приму его, если это решит проблему. Спасибо за вашу помощь!