Programa Builders

Construa com a gente por um mês inteiro. Uso e add-ons ilimitados, chamadas semanais e seu próprio canal no Slack.

Saiba mais
Polymorfa

Kits de UI

UI pronta, já conectada à API

Coloque no seu app uma caixa de entrada completa, um chat, um builder de modelos ou uma tela de chamada. Cada componente fala com a Polymorfa usando um token de cliente de curta duração, então a sua chave de API fica no seu servidor.

Componentes React
21
Web Components
9
Rota de servidor por trás de todos
1
Duração máxima de um token de cliente
15 min

Componentes

Todas as telas, prontas.

Use a caixa de entrada inteira ou só as partes de que precisa. Cada uma lê e envia pela Polymorfa, com suporte a teclado e estados de carregamento, vazio e falha já incluídos.

Um componente, a caixa de entrada inteira. O Inbox mostra a lista de conversas, o chat, o compositor e um painel de contato. Use inteiro ou pegue as partes.
Caixa de entrada e lista de conversas. Busca, filtros de não lidas, rascunhos e arquivadas, chats fixados e navegação por teclado. O Inbox acrescenta o chat e um painel de contato para os campos do seu CRM.
Janela de chat e gaveta. Separadores de data, citações de resposta, confirmações de entrega e o botão Tentar novamente quando um envio falha. Mostre inline ou como gaveta ao lado das suas telas.
Compositor. Fotos, vídeos, áudio e documentos pelo seletor, colando ou arrastando. Mensagens de voz, emoji e respostas rápidas com uma barra.
Builder de modelos. Modelos padrão, carrossel, autenticação e oferta por tempo limitado, com prévia ao vivo. Salvar um rascunho e enviar à Meta continuam separados.
Botão de conexão e status. O botão abre a página hospedada do QuickLink da Polymorfa, então o pareamento nunca roda dentro do seu app. O selo de status oferece Tentar novamente depois de uma falha.
Chamadas. O CallButton faz uma chamada e o CallSurface cuida do toque, do vídeo, dos dispositivos e de uma janela destacada. Em HTML puro, use <pmfa-call>.

Seguro no navegador

Seguro para rodar no navegador.

O seu servidor decide o que cada usuário conectado pode fazer. O navegador só guarda um token de cliente para um número, e a API confere cada requisição com ele.

O seu servidor emite o token. A sua rota autentica o usuário e retorna um token de cliente que expira em até 15 minutos. A chave de API nunca sai do seu servidor.
Controles que o token não permite ficam ocultos. Sem send_message, o compositor some em vez de ficar desativado. Os builds de desenvolvimento avisam a permissão que falta uma vez; em produção, nada é registrado.
Regras que a API aplica. Limite destinatários, origens e volume diário por número. No modo conversa, um token só responde a quem escreveu dentro da janela, de 24 horas a menos que você mude.

No seu código

Um provider, uma rota, um componente.

Monte a caixa de entrada, conceda acesso no seu servidor, use sem React e depois ajuste ao seu design.

app/support/inbox.tsx
"use client";
import { Inbox, PolymorfaProvider } from "@polymorfa/react";

export function SupportInbox() {
  return (
    <PolymorfaProvider tokenEndpoint="/api/polymorfa/token">
      <Inbox />
    </PolymorfaProvider>
  );
}

O seu design

Com a cara do seu produto.

Defina cores, fontes, espaçamento e raio uma vez. Todos os componentes seguem esses valores nos temas claro e escuro.

Claro e escuro a partir de uma aparência. Defina a sua cor principal e uma variação para o escuro. O tema do sistema segue a configuração de cada visitante.
Estilize qualquer slot. Adicione a sua classe a qualquer parte, estilize Web Components com ::part() ou desligue os estilos incluídos e escreva os seus. O seu CSS sempre prevalece.
As suas palavras, em qualquer direção. Substitua qualquer texto pela sua própria tradução. Textos que faltarem voltam para o inglês, e layouts da direita para a esquerda seguem o idioma.

Qualquer frontend

Um kit para qualquer frontend.

Os mesmos componentes e permissões no framework que a sua equipe já usa, do React ao HTMX renderizado no servidor.

O seu framework, a sua linguagem. React e Web Components em TypeScript, Blazor em C#, Leptos em Rust, Livewire em PHP, e Django ou templ com HTMX.
O kit por trás do Console. A tela Chats do Console da Polymorfa é feita com a mesma lista de conversas e a mesma janela de chat que você instala.

Superfície da API

O que os componentes chamam.

Os componentes chamam uma rota no seu servidor, que chama a Polymorfa com a sua chave. Envios e chamadas vão direto para a API com o token de cliente.

A rota do seu servidor

  • POST/api/polymorfa/tokenEmite um token de cliente para o usuário conectado
  • GET/api/polymorfa/history/conversationsConversas que a concessão permite
  • GET/api/polymorfa/history/conversations/{id}/messagesUma conversa, 404 fora da concessão
  • GET/api/polymorfa/eventsAtualizações ao vivo como server-sent events
  • POST/api/polymorfa/connectCria um QuickLink para o botão de conexão
  • POST/api/polymorfa/templatesLista, salva e envia modelos

API da Polymorfa

  • POST/platform/client-tokensEmite um token para um número
  • PUT/platform/sessions/{session}/client-rulesDefine o que os tokens de um número podem fazer
  • POST/messaging/{number}/messages/sendEnvia pelo compositor
  • POST/messaging/quicklinksCria o link hospedado de pareamento
  • Eventomessage.receivedNovas mensagens chegam à caixa de entrada
  • Eventomessage.ackConfirmações de entrega e leitura

Comece com um número grátis

Seu primeiro número real é grátis. Adicione mais números no Pay-As-You-Go.