如何将基于Bot Framework Node.js开发的Microsoft WebChat机器人与Salesforce在线客服集成？

Great question! Integrating your Bot Framework Node.js Web Chat bot with Salesforce Live Agent is totally feasible, and there are clear paths to make this work—whether you need a tailored implementation for your Node.js bot or a general approach for any Microsoft Web Chat setup. Let’s dive in.

This approach is built specifically for your Node.js bot, focusing on seamless context handoff to Salesforce agents.

1. Lay the Salesforce Live Agent Groundwork #

First, get your Salesforce org ready for chat:

• Enable Live Agent in Salesforce Setup, create a deployment, configure chat buttons, set up agent queues and skill groups. You’ll need three key values: Deployment ID, Organization ID, and Button ID.
• Grab your Live Agent endpoint URL (it’ll look like https://d.la4-c1cs-iad.salesforceliveagent.com/chat/rest—adjust based on your Salesforce instance).
• Add your WebChat deployment domain to Salesforce’s CORS whitelist to avoid cross-origin errors.

2. Build Transfer Logic in Your Node.js Bot #

Add a trigger for human handoff (e.g., when the user types "talk to agent" or hits a specific intent), then handle the Salesforce chat initialization:

const { WaterfallDialog } = require('botbuilder-dialogs');

// Define a dialog for handling agent transfer
const transferDialog = new WaterfallDialog('transferDialog', [
    async (step) => {
        // Gather user context to pass to Salesforce
        const userContext = {
            userId: step.context.activity.from.id,
            conversationHistory: await fetchChatHistory(step.context),
            userQuery: step.context.activity.text
        };

        // Call Salesforce's Live Agent init API
        const liveAgentSession = await startSalesforceChat(userContext);
        
        if (liveAgentSession.success) {
            await step.context.sendActivity('Connecting you to a live agent—one moment please!');
            // Send an event to the WebChat frontend to launch the Salesforce chat window
            await step.context.sendActivity({
                type: 'event',
                name: 'launchLiveAgent',
                value: {
                    deploymentId: 'YOUR_SF_DEPLOYMENT_ID',
                    orgId: 'YOUR_SF_ORG_ID',
                    buttonId: 'YOUR_SF_BUTTON_ID',
                    sessionKey: liveAgentSession.sessionKey,
                    serverUrl: liveAgentSession.serverUrl
                }
            });
        } else {
            await step.context.sendActivity('Sorry, we can’t connect to a live agent right now. Please try again later.');
        }
        return step.endDialog();
    }
]);

// Helper function to initialize Salesforce chat with context
async function startSalesforceChat(userContext) {
    const response = await fetch('https://YOUR_LIVE_AGENT_ENDPOINT/chat/rest/Chasitor/ChasitorInit', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-LIVEAGENT-API-VERSION': '57.0',
            'X-LIVEAGENT-AFFINITY': null,
            'X-LIVEAGENT-SESSION-KEY': null,
            'X-LIVEAGENT-SEQUENCE': '1'
        },
        body: JSON.stringify({
            organizationId: 'YOUR_SF_ORG_ID',
            deploymentId: 'YOUR_SF_DEPLOYMENT_ID',
            buttonId: 'YOUR_SF_BUTTON_ID',
            userAgent: 'Bot Framework WebChat',
            language: 'zh-CN',
            visitorName: userContext.userId,
            prechatDetails: [
                { label: 'User ID', value: userContext.userId, displayToAgent: true },
                { label: 'Chat History', value: JSON.stringify(userContext.conversationHistory), displayToAgent: true },
                { label: 'User Query', value: userContext.userQuery, displayToAgent: true }
            ]
        })
    });
    return await response.json();
}

// Helper to fetch past chat history (implement this based on your bot's storage)
async function fetchChatHistory(context) {
    // Example: Pull messages from your bot's conversation state
    const state = await conversationState.get(context);
    return state.pastMessages || [];
}

Don’t forget to register the transferDialog with your bot’s dialog set!

3. Integrate Salesforce Chat in the WebChat Frontend #

When the frontend receives the launchLiveAgent event from the bot, load the Salesforce Live Agent component:

import React, { useEffect } from 'react';
import ReactWebChat from 'botframework-webchat';

function WebChat({ directLine }) {
    useEffect(() => {
        directLine.activity$.subscribe(activity => {
            if (activity.type === 'event' && activity.name === 'launchLiveAgent') {
                initSalesforceChat(activity.value);
            }
        });
    }, [directLine]);

    const initSalesforceChat = (config) => {
        // Load Salesforce's Live Agent script
        const script = document.createElement('script');
        script.src = `https://c.la4-c1cs-iad.salesforceliveagent.com/content/g/js/57.0/deployment.js`;
        script.onload = () => {
            window.liveagent.init(config.serverUrl, config.deploymentId, config.orgId);
            window.liveagent.startChat(config.buttonId);
        };
        document.body.appendChild(script);
    };

    return <ReactWebChat directLine={directLine} />;
}

export default WebChat;

Adjust the Salesforce script URL to match your instance’s domain.

If you need a method that works with any WebChat setup (not just Node.js Bot Framework), these two approaches are solid:

方案一：Frontend-Triggered Handoff (Simplest) #

• When the user requests a human agent, your bot sends a message with a "Connect to Agent" button.
• On button click, the frontend loads Salesforce’s pre-built chat widget (using the chat button code you generate in Salesforce Setup).
• Pros: Super easy to implement, no backend changes needed.
• Cons: No context transfer—agents won’t see the user’s prior chat history with the bot.

方案二：Context-Synced Handoff (Recommended) #

• Collect the user’s chat history and details in the frontend.
• Call Salesforce’s ChasitorInit API directly from the frontend to pass context (like chat history, user ID) to agents.
• Launch the Salesforce chat widget using the session data returned from the API.
• This ensures agents have full context of the user’s interaction with the bot, leading to better support.

方案三：Deep Bidirectional Integration (Advanced) #

For full sync between WebChat and Salesforce:

• Use Salesforce’s REST API or Streaming API to push agent messages from Salesforce to your WebChat.
• Forward user messages from WebChat to Salesforce’s Live Agent API to keep the chat history in sync on both sides.
• This is ideal if you need agents to manage the entire conversation from Salesforce, or if you want the bot to resume the chat after the agent signs off.

• CORS: Double-check your Salesforce CORS settings—your WebChat domain must be allowed to call Live Agent APIs.
• API Versioning: Salesforce updates its API regularly; make sure your script and API calls use the same version to avoid compatibility issues.
• Privacy: Ensure you’re complying with data regulations (like GDPR) when sharing user data with Salesforce.
• Error Handling: Add fallback logic for when Salesforce Live Agent is unavailable (e.g., show a phone number or email option).

内容的提问来源于stack exchange，提问作者Snekha Shivakumar