Документация / Установка виджета / React / Next.js / Vue

React / Next.js / Vue — установка кода виджета

Пошаговая инструкция по установке виджета NeuronChat на сайт на платформе React / Next.js / Vue.

React / Next.js

Добавьте скрипт виджета в корневой компонент (App или Layout). Код виджета и параметры (data-client, data-variant) берутся в личном кабинете (Настройка виджета).

import Script from 'next/script' // для Next.js

// В компоненте (layout или _app):
<Script
  src="https://ваш-домен/widget.js"
  data-client="ВАШ_CLIENT_ID"
  data-variant="bubble"
  strategy="lazyOnload"
/>

Vue / Nuxt

В nuxt.config.ts или через плагин добавьте скрипт в head.script. Значения data-client и data-variant возьмите из личного кабинета.

// nuxt.config.ts
export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          src: 'https://ваш-домен/widget.js',
          'data-client': 'ВАШ_CLIENT_ID',
          'data-variant': 'bubble',
          defer: true
        }
      ]
    }
  }
})