如何将Telegram整合到Twilio Flex对话中？

方石剑
806 阅读5分钟

在这篇文章中，我将向您展示如何将Telegram作为一个渠道加入Flex对话，为您的客户提供另一种方式来联系您的联络中心。这种特殊的方法只需要后台开发，不需要建立一个额外的Flex UI插件。

前提条件

在我们开始之前，你需要确保你已经设置了一些东西：

现在你已经准备好了，我们可以开始整合了

Example Flex and Telegram Integration screenshot

开始吧

虽然Flex Conversations只支持短信/彩信、WhatsApp和聊天工具，但你有工具可以添加你想要的渠道，让你的客户满意。

为了在Telegram上的客户和Flex上的代理之间建立对话，我们将建立一个应用程序，从Telegram接收信息并将其发送到Twilio，反之亦然，该应用程序将：

  1. 当有新消息发出时，监听Telegram的事件。如果客户已经与代理进行了对话，该消息将被添加到现有的对话中，否则将创建一个新的对话。
  2. 当代理发布消息时，监听对话中的事件，并将其发回给Telegram。

下面是一个高层次的图表，说明这将如何工作：

Flex Conversations and Telegram architecture overview

创建一个Telegram机器人

为了让你的客户有机会通过Telegram与你的支持团队取得联系，你需要创建一个Telegram机器人。

在你的设备上安装Telegram Messenger应用程序后，你需要找到BotFather（一个帮助你创建新的机器人账户和管理现有机器人的机器人），创建一个新的机器人并为它选择一个用户名。欲了解更多信息，请看Telegram机器人文档。

创建一个新的工作室流程

在这一步，我们将创建一个新的工作室流程，将新的入站对话路由到Flex。

SendToFlex widget on a Studio canvas

  • 创建一个新的工作室流程，例如，"Telegram流程"
  • 找到 "传入对话"触发器。如果你没有看到它，你的账户缺少一个特殊的账户标志。请联系支持部门或你的客户经理寻求帮助。
  • 将 "传入对话"触发器连接到 "发送到Flex"小组件。配置小工具如下。
    • 选择你想要的TaskRouter工作流程
    • 将任务通道设置为 "可编程的聊天"。
  • 点击保存并发布您的更改。
  • 保存你的Studio Flow SID，因为我们以后会需要它。

接收来自Telegram的信息

现在我们有了我们的机器人和Studio流程，我们可以开始接收来自Telegram的消息。为此，我们将实现一个/receive-message 端点，它将处理来自Telegram的请求并将消息转发给Flex Conversations：

router.post('/receive-message', async function (request, response) {
    const chatId = request.body.message.chat.id;
    const body = request.body.message.text;

    await sendMessageToFlex(chatId, body);

    response.sendStatus(200);

});

sendMessageToFlex 被分解成几个进一步的功能：让我们看看它们各自负责的内容：

async function sendMessageToFlex(chatId, body) {
    let identity = `telegram_user_${chatId}`;
    let existingConversationSid = await findExistingConversation(identity);
    if (existingConversationSid === undefined) {
        const {sid: conversationSid} = await createConversation(chatId);
        await createParticipant(conversationSid, identity);
        await createScopedWebhook(conversationSid);
        existingConversationSid = conversationSid;
    }

    await createMessage(existingConversationSid, identity, body);
}

我们调用findExistingConversation ，以了解客户是否已经在与代理进行对话。如果对话存在，新消息将被添加到其中，否则将创建一个新的对话：

async function findExistingConversation(identity) {
    const conversations = await fetchParticipantConversations(identity);
    let existing = conversations.find(conversation => conversation.conversationState !== 'closed');
    return existing !== undefined ? existing.conversationSid : undefined;
}

createConversation 和 ，正如其名称所示，负责创建对话并添加参与者--以防客户刚刚接触到，并且已经没有活跃的对话。createParticipant：

async function createConversation(chatId) {
    return client.conversations.conversations
        .create({
            friendlyName: `Telegram_conversation_${chatId}`
        });
}

async function createParticipant(conversationSid, identity) {
    return client.conversations.conversations(conversationSid)
        .participants
        .create({identity: identity});
}

最后，我们要为对话添加一个范围内的webhook。以studio 为目标，配置过滤器设置为onMessageAdded ，任何被添加到对话中的消息都将调用指定流量上的Incoming Conversation触发器（这就是我们将使用我们的Studio Flow的SID）：

async function createScopedWebhook(conversationSid) {
    await client.conversations.conversations(conversationSid)
        .webhooks
        .create({
            'configuration.filters': 'onMessageAdded',
            target: 'studio',
            'configuration.flowSid': studioFlowSid
        });
}

现在对话已经准备好了，我们可以把Telegram的消息加入其中。我们需要在消息发送时调用我们的webhook，需要注意的是，只有SDK驱动的客户端（如手机或浏览器）才会调用webhook，而无需进一步操作。当使用API或服务器端帮助库时，除非头顶的Webhook Enabled被设置为true ，否则它们不会被调用：

async function createMessage(conversationSid, author, body) {
    return client.conversations.conversations(conversationSid)
        .messages
        .create({
            author: author,
            body: body,
            xTwilioWebhookEnabled: true
        });
}

我们创建了逻辑来处理来自Telegram的传入信息。现在，我们要做的就是确保我们收到来自Telegram的这些更新。为此，我们将在我们的Telegram机器人中设置一个webhook。每当机器人有更新时，我们的应用程序将收到一个HTTPS POST请求。我们可以在我们的应用程序启动和运行后立即执行这部分代码：

const init = async () => {     
await axios.get(`https://api.telegram.org/bot${telegramApiToken}/setWebhook?url=${webhookBaseUrl}/receive-message&allowed_updates=["message"]`)
}

现在让我们来测试一下!

去吧，让自己成为一个代理，然后向你的Telegram机器人发送一条信息。代理人很快就会收到Telegram用户发来的聊天请求。不过有一个问题--代理的消息还不能到达Telegram用户那里。让我们来解决这个问题!

向Telegram发回消息

我们收到了Telegram的信息，并将其发送给了Flex，现在我们需要建立相反的方向。让我们创建另一个端点，每当Flex的代理向对话中添加新的信息时，该端点将接收和处理更新：

router.post('/new-message', async function (request, response) {
    if (request.body.Source === 'SDK') {
        await axios.post(`https://api.telegram.org/bot${telegramApiToken}/sendMessage`, {
            chat_id: request.query.chat_id,
            text: request.body.Body
        })
    }
    response.sendStatus(200);
});

为了使这个端点得到执行，我们需要为对话添加另一个范围的webhook，并指定配置url：

await client.conversations.conversations(conversationSid)
        .webhooks
        .create({
            target: 'webhook',
            'configuration.filters': 'onMessageAdded',
            'configuration.method': 'POST',
            'configuration.url': `${webhookBaseUrl}/new-message?chat_id=${chatId}`,
        })

现在，代理也可以回复客户了

你的Telegram集成的后续步骤

这个概念验证的代码可以在这个repo中找到。

你可能想为你的集成探索更多的功能，比如获取更多关于客户的信息，为你的代理提供一些背景，或者从Telegram接收其他类型的更新，比如关于编辑过的消息的更新。本教程和资源库中的代码应该为您提供一个起点，使您能够建立和整合Telegram到Flex Conversations中。此外，你可以把它作为一个例子，把任何其他的自定义渠道添加到你的联络中心，因为其过程将与此类似。

avatar
文章
阅读
粉丝