Developer Portal

Portal único para docs, playgrounds, examples, troubleshooting e self-service técnico.

Portal

Hub principal para docs, playgrounds e downloads.

Getting Started

Jornada completa para integrar o Chatbeep em menos de 10 minutos.

Widget Playground

Configurator com preview ao vivo, snippet e gerador por stack.

API Playground

Operações maduras da API v1 com code samples e Try It.

SDK Playground

Pacotes oficiais, quick starts e smoke workflow por stack.

ChatFlows Playground

Simulador público de fluxos com variáveis, contexto e transições.

Examples

Biblioteca de exemplos para suporte, lead capture, FAQ e integrações.

Troubleshooting

Checks operacionais para widget, auth, billing, push e fiscal.

Installation Wizard

Next.js

Usar component client-side ou next/script em páginas públicas.

HTML Laravel WordPress React Vue Next.js Nuxt Angular

Instalação

Renderizar o component apenas em páginas client-side.

Usar strategy afterInteractive para não competir com SSR.

Confirmar o widget depois da hidratação.

Configuração

Centralizar token em NEXT_PUBLIC_*.

Não inserir o snippet tanto no app router como no pages router ao mesmo tempo.

Troubleshooting

Se houver hydration mismatch, verifique se o snippet foi renderizado em server components indevidos.

Snippet

Base pronta para Next.js

Abrir configurator

"use client";

import Script from "next/script";

export function ChatbeepWidget() {
  return (
    <Script
      src="https://cdn.chatbeep.app/widget/chatbeep.js"
      strategy="afterInteractive"
      data-api-base="https://chatbeep.app"
      data-installation-token="SEU_TOKEN_DA_INSTALACAO"
    />
  );
}

Depois do snippet

API Playground

Teste o health público e os exemplos da API v1.

Examples Library

Escolha um fluxo inicial para suporte, FAQ ou lead capture.