Как подключить виджет с внешним скриптом к одному компоненту React

Question

Надо подключить виджет, но виджет встраивается автоматически в месте подключения файла app.js. Это бы не было проблемой на сайте с чистым JS и обычным HTML, но мой сайт на React.

Были попытки:

подключать через public/index.html - так виджет висит на всех страницах, а должен быть только на одной (попытки скрывать и показывать его в зависимости от параметров маршрута ссылки не увенчались успехом)
динамическая подгрузка внутри компонента страницы с помощью useEffect не сработала
React Helmet не помог

Сам виджет подключить можно в 3 шага по сути, на сайте виджета есть генератор виджета:

Подключить стили:

<link rel="stylesheet" href="https://widget.gocruise.ru/css/app.css">

Установить настройки:

<script>
cesSettings = {
  email: "***@mail.ru",
  currencies: ["RUB","USD","EUR"],
}
</script>

Подключить скрипт:

<script src="https://widget.gocruise.ru/js/app.js"></script>

И с подключением скрипта проблема. В документации сказано, что добавив <div id="ces"></div> виджет можно размещать где вздумается, но на практике виджет подключается только там, где вызван внешний скрипт. Как подключить такой виджет только к одному компоненту реакт-приложения?

Вот сама короткая документация: https://widget.gocruise.ru/get

Answer 1

Для подключения виджета, можно на этапе монтирования компонента, добавлять все ссылки на скрипты и стили напрямую.

const addScript = () => {
  const script = document.createElement('script')

  script.id = 'custom-widget-script'
  script.type = 'module'
  script.src = 'https://widget.gocruise.ru/js/app.js'

  document.body.appendChild(script)
}

После чего добавить стили

const addStyles = () => {
  const style = document.createElement('link')
  
  style.id = 'custom-widget-style'
  style.rel = 'stylesheet'
  style.href = 'https://widget.gocruise.ru/css/app.css'

  document.head.appendChild(style)
}

Теперь необходимо следить за тем, что было добавлено на страницу посредством виджета.

Для этого можно воспользоваться MutationObserver, все элементы которые будут добавлены после его инициализации, будут считаться элементами виджета.

Их можно сохранить в массив, а потом при размонитировании компонента удалить добавленные скрипты, стили, и элементы виджета, пробежавшись по массиву

БЛОГ НА HUSL

Как подключить виджет с внешним скриптом к одному компоненту React

Ответы (1 шт):