Ainda estamos construindo coisas aqui! Ajude-nos a melhorar relatando bugs aqui.
Entrar

Incorporação do Assistente de Docs

Aprenda como incorporar o widget do Assistente de Docs nas suas páginas de documentação.

Visão Geral

O Assistente de Docs é um widget especializado alimentado por IA projetado especificamente para páginas de documentação. Ele fornece ajuda instantânea aos seus usuários respondendo perguntas sobre sua documentação usando um diálogo interativo em tela cheia.

Experimente agora!

Clique no botão abaixo para ver o Assistente de Docs em ação nesta página.

Configuração Básica

Começar com o widget do Assistente de Docs é simples. Apenas siga estes dois passos:

Se a sua página de documentos carregar o assistente dentro de um iframe, certifique-se de que a origem da página host esteja incluída em Allow_origins do seu aplicativo OAuth. O endpoint do token do widget valida essa origem antes de emitir um token.

Passo 1: Adicionar o Script

Adicione o script docs-widget.js à sua página HTML com a configuração necessária. Se você carregar vários widgets de documentação, atribua um data-instance-id exclusivo para cada script:

<script src="https://widget.companin.tech/docs-widget.js" data-client-id="YOUR_CLIENT_ID" data-assistant-id="YOUR_ASSISTANT_ID" data-config-id="YOUR_CONFIG_ID" data-instance-id="docs-help" data-locale="en"></script>

Passo 2: Adicionar um Botão de Gatilho

Crie um botão ou elemento que chame o método open() do widget:

<button id="help-btn" type="button">Ask Documentation Assistant</button><script>  const handleOpen = (event) => {    console.log('Docs widget opened', event?.context);  };  // Generic event API (returns unsubscribe function)  const unsubscribeOpen = window.CompaninDocsWidget?.on?.('open', handleOpen);  document.getElementById('help-btn')?.addEventListener('click', () => {    window.CompaninDocsWidget?.open();  });  // Cleanup on page unload or SPA route change  window.addEventListener('beforeunload', () => {    if (typeof unsubscribeOpen === 'function') unsubscribeOpen();  });</script>

Exemplos

Aqui estão alguns exemplos práticos de como integrar o Assistente de Docs:

Exemplo 1: Integração Básica HTML

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>My Documentation</title></head><body>  <header>    <h1>Product Documentation</h1>    <button onclick="window.CompaninDocsWidget.open()">      Need Help?    </button>  </header>  <main>    <!-- Your documentation content -->  </main>  <script    src="https://widget.companin.tech/docs-widget.js"    data-client-id="your-client-id"    data-assistant-id="your-assistant-id"    data-config-id="your-config-id"    data-locale="en">  </script></body></html>

Exemplo 2: Botão Personalizado com Event Listener

Para mais controle, você pode adicionar event listeners aos seus botões existentes:

// Wait for the widget to loadwindow.addEventListener('load', () => {  const unsubscribeResponse = window.CompaninDocsWidget?.on?.('response', (event) => {    console.log('Assistant response:', event?.data);  });  document.getElementById('help-btn').addEventListener('click', () => {    if (window.CompaninDocsWidget) {      window.CompaninDocsWidget.open();    }  });  window.addEventListener('beforeunload', () => {    if (typeof unsubscribeResponse === 'function') unsubscribeResponse();  });});

Exemplo 3: Integração React/Next.js

Em uma aplicação React ou Next.js:

import React from 'react';export default function Documentation() {  const openDocsAssistant = () => {    if (window.CompaninDocsWidget) {      window.CompaninDocsWidget.open();    }  };  return (    <div>      <h1>API Documentation</h1>      <button        onClick={openDocsAssistant}        className="help-button"      >        Ask Customer Support AI Assistant      </button>    </div>  );}

Opções de Configuração

O widget Docs Assistant aceita vários parâmetros de configuração. Use data-instance-id para controle determinístico por instância ao incorporar vários widgets na mesma página:

Parâmetros Necessários

  • data-client-id: Seu identificador único de cliente do dashboard Companin
  • data-assistant-id: O ID do assistente que você deseja usar
  • data-config-id: ID de configuração para personalização do widget

Parâmetros Opcionais

  • data-locale: Código de idioma (padrão: 'en'). Suporta: en, de, es, fr, it, nb, nl, pt, sv
  • data-dev: Definir como 'true' para modo desenvolvimento (conecta ao localhost:3001)

API JavaScript

Depois de carregado, o widget expõe uma API global para controle programático. Em cenários com múltiplos widgets, prefira registros por instância (CompaninDocsWidgets.get(instanceId)) em vez de depender apenas da referência global mais recente:

open()

window.CompaninDocsWidget.open();

Abre o diálogo do Assistente de Docs em modo tela cheia.

close()

window.CompaninDocsWidget.close();

Fecha o diálogo do Assistente de Docs e oculta o widget.

Estilo Personalizado

Você pode estilizar seus botões de gatilho como desejar. Aqui está um exemplo de um botão de ajuda flutuante:

.my-help-button {  position: fixed;  bottom: 20px;  right: 20px;  padding: 12px 24px;  background: #2563eb;  color: white;  border: none;  border-radius: 8px;  font-weight: 600;  cursor: pointer;  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);  transition: all 0.2s;}.my-help-button:hover {  background: #1d4ed8;  transform: translateY(-2px);  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);}

Melhores Práticas

  • Coloque o botão de gatilho em um local proeminente e facilmente acessível (ex. cabeçalho, botão flutuante)
  • Use texto de botão claro e orientado para ação como 'Perguntar à IA' ou 'Precisa de ajuda?'
  • Certifique-se de que o script do widget seja carregado antes de tentar chamar seus métodos API
  • Mantenha suas credenciais de cliente seguras - nunca as exponha em código do lado cliente

Solução de Problemas

O widget não carrega?

Certifique-se de que o script esteja carregado antes de chamar a API. Você pode verificar se o widget está disponível:

window.addEventListener('load', () => {  console.log('Widget loaded:', !!window.CompaninDocsWidget);});

O diálogo não abre?

Verifique se você forneceu corretamente todos os parâmetros obrigatórios (client-id, assistant-id, config-id). Se houver vários widgets, cada script deve ter um data-instance-id exclusivo.

← VoltarPróximo: Visão Geral →