React & Next.js SDK

O pacote opiny-sdk-react facilita a injeção do widget, controle de rotas e envio de metadados.

Instalação

Via npm:

npm install opiny-sdk-react

Via yarn:

yarn add opiny-sdk-react

Via pnpm:

pnpm add opiny-sdk-react

Uso básico

Adicione o componente no seu arquivo de layout principal (ex: app/layout.tsx no Next.js).

import { Opiny } from 'opiny-sdk-react';

export default function RootLayout({ children }) {
  return (
    <html lang="pt-BR">
      <body>
        {children}
        <Opiny surveyId="SEU_ID_DA_PESQUISA" />
      </body>
    </html>
  );
}

Configuração avançada

Você pode controlar onde o widget aparece e enviar dados do usuário logado.

<Opiny 
  surveyId="SEU_ID_DA_PESQUISA"
  
  // Dados do usuário (opcional)
  metadata={{
    userId: "123",
    plan: "pro",
    name: "João Silva"
  }}

  // Mostrar apenas nestas rotas
  includedPaths={['/dashboard/*', '/pricing']}

  // Esconder nestas rotas (prioridade alta)
  excludedPaths={['/login', '/register']}
/>

Regra de exibição

Defina onde o widget deve aparecer com base na tabela abaixo.

Regra	Comportamento
`*`	Aparece em todas as páginas do site.
`/`	Aparece apenas na página inicial (Home).
`/blog/*`	Aparece em qualquer página que comece com `/blog/`.
`/contato`	Aparece apenas na página exata `/contato`.

O SDK observa pushState, replaceState e popstate. Ao sair de uma rota elegível ou desmontar o componente, a instância e seus listeners são removidos automaticamente, evitando widgets duplicados em sessões longas de aplicações SPA.

Introdução

Plataforma

Integrações & SDKs

IA & automação (MCP)

Instalação

Uso básico

Configuração avançada

Regra de exibição

​Instalação

​Uso básico

​Configuração avançada

​Regra de exibição

Instalação

Uso básico

Configuração avançada

Regra de exibição