You are viewing the Portuguese (Brazil) site, but your language preference is set to English. Switch to English site →

Menu

Integrar um cliente de chat personalizado ao Flex

Este produto Twilio está atualmente disponível como uma versão Beta. Alguns recursos ainda não foram implementados e outros podem ser alterados antes que o produto seja declarado como disponível para o público em geral. O uso desta versão Beta está sujeito aos termos relevantes do contrato de licença vigente. Os produtos Beta não são abrangidos por um SLA da Twilio. Saiba mais sobre o suporte a produtos Beta.

Flex Conversations requer Flex UI (IU do Flex) 2.0. Se você estiver no Flex UI (IU do Flex) 1.x, consulte as páginas Mensagens no Flex.

Talvez você já tenha criado uma experiência de chat personalizada com o Twilio Conversations ou esteja procurando criar do zero. Você pode integrar essas experiências de chat ao Flex e entregar mensagens de conversa recebidas aos seus agentes.

Temos um aplicativo de chat de demonstração de código aberto disponível para você começar. Consulte o arquivo README para obter mais informações sobre os recursos oferecidos nesse aplicativo de exemplo e como ele funciona.

Exemplo de integração de chat com o Conversations

O diagrama a seguir ilustra uma maneira potencial de integrar seu aplicativo de Chat ao Flex:

example diagram on how to integrate chat application with flex

  1. Seu aplicativo precisa inicializar o Twilio Conversations SDK com um Token de Acesso e um SID de conversa. Eles devem ser obtidos de seu back‐end. Isso está fora do escopo deste guia e você pode obter mais informações do início rápido dos aplicativos Twilio Conversations Client.
  2. Seu back‐end normalmente usará a Biblioteca auxiliar do Twilio, mas para os fins deste guia, usaremos curl para nossas solicitações de API Conversations:
    1. Crie uma conversa usando a API Twilio Conversations.
      curl -X POST https://conversations.twilio.com/v1/Conversations \
      --data-urlencode "MessagingServiceSid=MGXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX" \
      --data-urlencode "FriendlyName=My First Custom Chat Conversation" \
      -u $TWILIO_ACCOUNT_SID:$TWILIO_AUTH_TOKEN
      
      SID                                 Chat Service SID                    Friendly Name                      Date Created
      CH1cbf85a0e7c844fca4cb4d2fad880196  IScf002bd40e59480bb62024d8fa161dbb  My First Custom Chat Conversation  Feb 17 2022 17:01:06 GMT-0800
    2. Adicione um participante à conversa. Use o SID da conversa que você criou na etapa anterior. Certifique‐se de que a identidade identifique exclusivamente seu usuário final e evite usar informações pessoalmente identificáveis (IPI) como nomes.
      twilio api:conversations:v1:conversations:participants:create \
          --conversation-sid=CH1cbf85a0e7c844fca4cb4d2fad880196 \
          --identity=testChatter
      
      SID                                 Messaging Binding
      MBb3469eabc7d040dbadc89a7876eb263f  null
    3. Adicione um webhook com escopo "studio" como o destino usando o endpoint do Webhook do Conversations. Com um webhook com escopo definido como Studio e o filtro de configuração definido como "onMessageAdded", qualquer mensagem adicionada à conversa chamará o acionador "conversa recebida" no fluxo do Studio especificado.
      twilio api:conversations:v1:conversations:webhooks:create --target=studio --configuration.flow-sid=FWd945421fea3b172bb9c5889a22d2f410 --configuration.filters='onMessageAdded' --conversation-sid=CH1cbf85a0e7c844fca4cb4d2fad880196
      
      SID                                 Target
      WH3bd00957227d499991c9a4ce5cd303e9  studio
  3. Agora, o Conversations SDK foi inicializado. Seu participante pode enviar uma mensagem.
  4. Seu aplicativo usa o Conversations SDK para enviar a mensagem. Para os fins deste guia, usaremos a Twilio CLI para enviar uma mensagem em nome de seu participante. É importante especificar a propriedade x-twilio-webhook-enabled para garantir que todos os webhooks de serviço ou escopo sejam chamados.
    twilio api:conversations:v1:conversations:messages:create --author=testChatter --body=hello --conversation-sid=CH1cbf85a0e7c844fca4cb4d2fad880196 --x-twilio-webhook-enabled=true 
  5. Quando a primeira mensagem é enviada, ela aciona o fluxo do Studio que você definiu na etapa 2.3.
  6. O Serviço de conversas localizará sua conversa e enviará um evento "onMessageAdded" para o Fluxo do Studio.
  7. Em seu fluxo, você precisa usar o widget Send to Flex para encaminhar seu participante, "testChatter" neste caso, a um agente no Flex. Nos bastidores, o widget Send to Flex chama a API Interactions para criar uma tarefa e roteá‐la. Aqui está um exemplo de solicitação POST da API Interactions que o Send to Flex faz (você não precisa fazer isso porque o Studio faz isso por você quando você define o Studio como o destino para "onMessageAdded"):
    curl --location --request POST 'https://flex-api.twilio.com/v1/Interactions/' \
    -u $TWILIO_ACCOUNT_SID:$TWILIO_AUTH_TOKEN
    --form 'Routing="{
            "type": "TaskRouter",
            "properties": {
                "workspace_sid": "WSe64dd8d07ac19edfed55a06c35df49b1",
                "workflow_sid": "WW728c781ba620af4a94bc552692221b17",
                "attributes": {
                   "channelType": "web", 
                   "from":  "testChatter"    }
            }
        }"' \
    --form 'Channel="{
            "type": "web",
            "initiated_by": "testChatter",
            "properties": {
                "media_channel_sid": "CH1cbf85a0e7c844fca4cb4d2fad880196"
            }
    }"'
  8. O agente Flex obterá uma reserva de tarefa e, quando aceitá‐la, ele será adicionado à mesma conversa.
Classifique esta página:

Precisa de ajuda?

Às vezes, todos nós precisamos; a programação é difícil. Receba ajuda agora da nossa equipe de suporte, ou confie na sabedoria da multidão navegando pelo Stack Overflow Collective da Twilio ou buscando a tag Twilio no Stack Overflow.

Obrigado pelo seu feedback!

Selecione o(s) motivo(s) para seu feedback. As informações adicionais que você fornece nos ajudam a melhorar nossa documentação:

Enviando seu feedback...
🎉 Obrigado pelo seu feedback!
Algo deu errado. Tente novamente.

Obrigado pelo seu feedback!

Indique‑nos e obtenha USD10 em 3 etapas simples!

Etapa 1

Obtenha o link

Obtenha um link de indicação pessoal gratuito aqui

Etapa 2

Dê USD10

Seu usuário se inscreve e faz a atualização usando o link

Etapa 3

Obtenha USD10

1.250 mensagens SMS grátis
OU 1.000 min de voz grátis
OU 12.000 chats
OU mais