Incorporar o WhatsApp Connect

Se você é um provedor de SaaS ou soluções e quer que seus clientes conectem seus números de telefone do WhatsApp pela sua conta Chakra, siga as etapas abaixo

1. Crie um token de conexão

Para incorporar o botão de conexão à sua página da web/aplicação web, primeiro você precisa gerar um token de conexão. Observe que esse token é válido por apenas 1 hora.

Use a API Create Connect Token para fazer isso. O ideal é gerá-lo no backend e passá-lo para o frontend.

Parâmetros necessários para esta API ao usá-la para um novo cliente, para o qual ainda não existe um plugin no Chakra:

• newPluginName - [opcional] Nome do novo plugin a ser criado para o cliente. Se nenhum valor for informado, o plugin receberá o nome "WhatsApp". Recomendamos incluir neste campo o nome do cliente ou outros identificadores relevantes e fáceis de ler. Esse será o nome do plugin no Chakra, e você poderá pesquisá-lo no webapp do Chakra usando esse nome.
• clientReferenceId - [opcional] Um ID de referência exclusivo para o cliente. Geralmente, esse será o ID do usuário ou o ID exclusivo do cliente no seu sistema interno. Isso ajudará a manter uma correlação entre o sistema Chakra e o seu sistema interno.
• clientName - [opcional] Nome do cliente conforme registrado no seu sistema interno. Geralmente, será o nome do usuário.
• clientEmail - [opcional] Endereço de e-mail do cliente
• clientPhone - [opcional] Número de telefone do cliente

Parâmetros necessários para esta API ao usá-la para um cliente existente, para o qual já existe um plugin no Chakra:

• `pluginId` - este é o pluginId do plugin do WhatsApp em que os detalhes da WABA conectada são armazenados. Você recebeu e armazenou esse pluginId quando o cliente concluiu o fluxo de Embedded Signup pela primeira vez. Não use um pluginId comum para todos os clientes; é altamente recomendável criar um novo plugin para cada cliente. Para novos clientes, esse parâmetro não deve estar presente nos parâmetros do body.

2. Incorpore o SDK

Para incorporar o SDK, adicione a seguinte tag de script ao head da sua página da web

<script src="https://embed.chakrahq.com/whatsapp-partner-connect/v1_0_1/sdk.js"></script>

Crie um div de contêiner com um ID exclusivo na sua página da web e, em seguida, adicione a seguinte tag de script ao final da página. É importante adicionar essa tag de script depois do div de contêiner; caso contrário, a inicialização falhará. Veja o exemplo de trecho abaixo:

  <div id="container">  </div>  <script>    const connectToken = "<CONNECT-TOKEN>";    const chakraWhatsappConnect = ChakraWhatsappConnect.init({      connectToken: connectToken,      container: '#container',   // optional, defaults to document.body      onMessage: (event, data) => console.log(event, data),      onReady: () => console.log('ready'),      onError: (err) => console.error(err),	  onSuccess: (data) => console.log('Connection successful, data:', data)    });    // Later, you can destroy the iframe:    // chakraWhatsappConnect.destroy();  </script>  

O argumento data da função onSuccess terá as chaves pluginId, whatsappBusinessAccounts e whatsappPhoneNumbers . Recomendamos fortemente que você armazene o valor de pluginId recebido aqui associado ao seu cliente no seu sistema interno e, futuramente, use esse pluginId ao gerar o connectToken para esse cliente. Assim, se o cliente quiser adicionar ou modificar uma WABA ou um número de telefone posteriormente, ele será associado ao plugin correto no Chakra.

3. Verifique se a integração foi bem-sucedida

Se a integração for bem-sucedida, você verá um botão "Connect with Facebook", como mostrado na captura de tela abaixo

Conectando um número de telefone do WhatsApp

Agora, seu cliente pode clicar no botão "Connect with Facebook" e concluir o cadastro incorporado. Um fluxo bem-sucedido será semelhante à demonstração abaixo: