Onboarding Doc for Livechat in Rocket.Chat. - WideChat/Rocket.Chat GitHub Wiki

Livechat Setup for Rocket.Chat.

Project Setup Overview.

Rocket.Chat

  • Clone the project 
    git clone [email protected]:WideChat/Rocket.Chat.git
  • Make sure the default node version is v12.18.x 
    meteor npm install
  • Start Rocket.Chat App 
    meteor run

Apps.Dialogflow

  • Clone the project 
    git clone [email protected]:WideChat/Apps.Dialogflow.git
  • Install the required packages 
    npm install

Apps.Salesforce.LiveAgent

  • Clone the project 
    git clone [email protected]:WideChat/Apps.Salesforce.LiveAgent.git
  • Install the required packages 
    npm install

Configure Rocket.Chat

Create Dialogflow and Salesforce bot users.

  1. Goto ⚙️ Administration -> Users
  2. Create Dialogflow Bot by clicking on ➕ NEW button
  3. Fill all required fields (Try using simple understandable terms)
    • Name
    • Username
    • Email (Tick verified)
    • Password
  4. Add bot and livechat-agent Roles from the dropdown.
  5. Click on save.
  6. Repeat from Step 2 for Salesforce Bot
  7. Go to Omnichannel -> Agents and change the Livechat Status to Available for both the bots.

Configure Omnichannel

Setup Dialogflow and Salesforce agents in omnichannel.

  1. Goto ⚙️ Administration -> Settings -> Omnichannel and enable Omnichannel by turning on the switch.
  2. Goto 🎧 Omnichannel -> Agents
  3. From the Username dropdown add your bots you've created during Rocket.Chat configuration
    • Dialogflow bot
    • Salesforce bot

Create Dialogflow and Salesforce omnichannel departments.

  1. Goto 🎧 Omnichannel -> Departments
  2. Create Dialogflow Department by clicking on ➕ NEW button
  3. Enable the department from top right switch.
  4. Provide Name and Email in their respective fields
  5. Add Bot agent to the department (Make sure to include single bot per department)
  6. Repeat from Step 2 for Salesforce Department

Disable registration form (Optional)

  1. Goto 🎧 Omnichannel -> Livechat Appearance -> Registration Form
  2. Turn off the Enabled Switch.

Additional omnichannel configuration

Goto ⚙️ Administration -> Settings -> Omnichannel and enable Omnichannel by turning on the switch.

  1. Livechat Settings
    • Goto ⚙️ Administration -> Settings -> Omnichannel -> Livechat
    • Turn of the Show Pre-registration Form Switch
  2. Routing Settings
    • Goto ⚙️ Administration -> Settings -> Omnichannel -> Routing
    • Turn on the Assign new conversations to bot agent Switch
    • In the Assign new conversations to department, provide Dialogflow department name created before.

Deploy Rocket.Chat Apps

Dialogflow and Salesforce apps need to be deployed to Rocket.Chat. Which will help to communicate with their respective APIs.

  • Enable development mode in Rocket.Chat app.

    • Open Rocket.Chat App
    • Goto ⚙️ Administration Settings -> General -> Apps
    • Turn on the switch for ☑️ Enable development mode

  • Install Rocket.Chat Apps CLI

     npm install -g WideChat/Rocket.Chat.Apps-cli

Deploy Dialogflow app into Rocket.Chat

Navigate into Apps.Dialogflow project directory and run the following command

rc-apps deploy --url http://localhost:3000 --username <user_username> --password <user_password>

Deploy Salesforce app into Rocket.Chat

cd into Apps.Salesforce.LiveAgent project directory and run the following command

rc-apps deploy --url http://localhost:3000 --username <user_username> --password <user_password>

Dialogflow Setup

Dialogflow is a natural language understanding platform used to design and integrate a conversational user interface into mobile apps, web applications, bots etc.

Dialogflow Console Setup

  • Create a new Google Cloud Project and get a credentials JSON file.
    • Follow the instructions here
    • Save the generated JSON file, it will be required to setup Dialogflow App in Rocket.Chat.
  • Login to Dialogflow Console
  • Create a new agent.
  • Select the Google Project created past this step.
  • Import Rocket.Chat bot configuration
    • Goto Agent Setting > Export and Import
    • Click on Restore from zip and select the configuration zip file.

Dialogflow App Setup

  • Open Rocket.Chat App
  • Goto ⚙️ Administration -> Apps -> Dialogflow
  • Fill the required fields by following this doc.
  • Set Target Department for Handover to the Salesforce department which we created in the omnichannel department section.
  • Lastly, you can test your Dialogflow Connection by viewing App Logs.
    • To view the logs, scroll to top of the apps page.
    • There click on 3 dots menu icon -> View Logs.
    • There select the most recent onSettingUpdated title.
    • If you see ------------------ Google Credentials validation Success ---------------- message, then it means your setup is fine.
    • If you don't see this message, then recheck your Dialogflow credentials (Check if the private key is entered correctly).

Salesforce.Livechat Setup

Salesforce Live Agent is real-time live chat support that can be embedded on any website and apps. This enables your customers and prospects to reach out and communicate with your company on the web while they are currently on your site or app.

Salesforce Console Setup

  • Create new dev account here.
  • Goto ⚙️ Settings -> Service Setup.
  • On the Service setup home page, click on View All.
  • Now select Chat With Customers (Search if required).
  • Add new Queue Name and Group Name.
  • Click on ➕ Button to add an agent to the queue.
  • Now set up your Agent's workload, default values are fine as well.
  • In the next step, select Service as type.
  • In the next step, don't turn on the Offline Support.
  • That's all, you're setup with Salesforce, if things are not clear yet please refer this video.

Salesforce App Setup

  • Open Rocket.Chat App
  • Goto ⚙️ Administration -> Apps -> Salesforce
  • Fill the required fields by following this doc.
  • Set Dialogflow Bot Username as the username you've assigned to the Dialogflow App
  • Set Dialogflow Bot Department Name as the department name of the Dialogflow bot user.