Skip to content

Latest commit

 

History

History
134 lines (91 loc) · 8.82 KB

README.md

File metadata and controls

134 lines (91 loc) · 8.82 KB

Chat Component with Experience Sites and Slack

This repo contains the Tightknit TDX Demo app for an LWC on Salesforce Experience Cloud sites that syncs chat messages with Slack.

Overview

Within the salesforce-app directory is a Metadata API package that contains the following items:

  • ChatConversation__c: custom object that represents a chat conversation
  • ChatMessage__c: custom object that represents an individual chat message in a conversation
  • ChatController.cls: custom Apex class for retrieving ChatMessage__c records
  • KnowledgeArticleSearch.cls: custom Apex class for searching a given search term in the org's Knowledge Articles
  • questionAndEscalation ("Question And Escalation" component): LWC custom component for Experience Cloud sites that offers users to search articles for their questions or talk to a customer support agent (on the Slack side)

The questionAndEscalation component initially presents the user with a question box in which they can enter a search term. The component performs a search through the org's Knowledge Articles and presents the deflection results.

The user may click "Talk to Support" and switch to a chat window. Each time the user enters a message, the component sends a POST request to the companion Slack app's webhook URL, as well as creates a ChatMessage__c record in Salesforce. The companion Slack app will be creating ChatMessage__c records in Salesforce as well. The questionAndEscalation component constantly polls Salesforce for all of the ChatMessage__c records for the conversation and updates the chat window accordingly. Thus, the ChatMessage__c records serve as the backend source of truth for the chat.

Setup

To be transparent, most of the manual setup listed here could be migrated into the actual Metadata API package in order to be deployed programmatically. But we ran out of time. Thus, this area is ripe for update if you would like to contribute! 😀

Experience Cloud Site

  1. Create an LWR Experience cloud site (instructions). The recommended template is Build Your Own (LWR).
  2. Allowlist the URLs related to the companion Slack app (i.e. CSP of site, Trusted Sites, or Remote Site Settings), including:
    1. the webhook URL of the Receive a message Slack trigger
    2. domain(s) that Slack profile images may be hosted on, e.g. https://avatars.slack-edge.com
  3. Open the Experience Builder > add the "Question And Escalation" custom component to your desired page.
    1. Configure the "Slack App Webhook URL" property of the component to use the Receive a message webhook URL of the companion Slack app.

Guest User (optional)

To support non-authenticated users on the site, you will need to grant permissions to the site's Guest user to use the objects in this package.

  1. In the Guest user's profile, enable CRUD access to the custom objects in this package (instructions):
    1. ChatConversation__c
    2. ChatMessage__c
  2. In the Guest user's profile, enable access to the FLS of all fields of the custom objects (profile > Custom Field-Level Security section > click "View" next to the object name):
    1. ChatConversation__c
    2. ChatMessage__c
  3. In the Guest user's profile, enable CRUD access to the custom Apex classes in this package (instructions):
    1. ChatController.cls
    2. KnowledgeArticleSearch.cls

Guest User profile needs access to the FLS of all fields on the custom objects

Knowledge

The demo app contains a feature where a Slack user can trigger a workflow to save AI-generated text content into a new Salesforce Knowledge Article record. This is the last part of the demo flow and is not necessarily required for the app to function.

Follow the the Enable and Configure Lightning Knowledge trailhead to enable Lightning Knowledge for your Salesforce org. The basic steps are also outlined here:

Enable Knowledge for the Org

  1. Enable Admin as a Knowledge user: Edit the Admin user object > enable as "Knowledge User"
  2. Enable Lightning Knowledge in the org: Go to Settings > Knowledge Settings > Enable Knowledge
    1. Enable Lightning Knowledge
    2. Turn on “Use standard Salesforce sharing”. Or if you prefer Data Category-based visibility permissions, you must configure DCs separately from these instructions.
  3. Configure Knowledge object and page layout: Go to Settings > Object Manager > Knowledge
    1. Page Layouts > edit Knowledge Layout > add “Visible in Public Knowledge Base” to the layout > Save (this is already visible in Salesforce Classic)
    2. Fields & Relationships > New > create the field that will contain your article body, e.g. Rich Text Area. Text-based fields are automatically included in searches against the object. Our demo app assumes a rich text field called Description__c.

Creating Knowledge Articles

Guide: https://help.salesforce.com/s/articleView?id=sf.knowledge_article_create.htm&type=5

Click on the App Launcher > Knowledge > click the New button > create the article > check “Visible In Public Knowledge Base” if you want the article visible to guest users > Save > Publish.

Enable Knowledge for Guest (optional)

  1. Grant access to Knowledge object: Open the site guest user’s profile
    1. Click Edit > grant READ permissions for the Knowledge Base object
    2. Field-Level Security > click “View” for Knowledge > Edit > give Read access for your custom field that holds the article body (for this field to be visible in API responses)
  2. Grant access to Knowledge article records: Sharing Settings > Knowledge Sharing Rules > New > select “Guest user access, based on criteria” > create criteria that will apply to articles of your choice. For testing purposes you could create a rule that applies to all articles, such as Created By ID - not equal to - 123456). Select your site’s guest user > click Save.

Enable Knowledge in the LWR Experience site

Guide: https://help.salesforce.com/s/articleView?id=sf.knowledge_add_knowledge_article_component.htm&language=en_US&type=5

  1. Open the Experience Builder
    1. Create the Knowledge object pages: click the + New Page button > select "Object Pages" > select "Knowledge"
    2. Open the Knowledge Detail Page > add the Knowledge Article component to the page
  2. Open the Workspaces view
    1. Select Administration > Preferences > check “Allow guest users to access public APIs” > click Save

Develop

Local Setup

Guide: https://developer.salesforce.com/docs/atlas.en-us.sfdx_dev.meta/sfdx_dev/sfdx_dev_intro.htm

Open a new VS Code window at this directory.

Authorize Your Org

Download the following VS Code extensions:

  1. Salesforce Extension Pack
  2. Salesforce CLI Integration

Open Command Palette (Ctrl+Shift+P):

  • Select "> SFDX: Authorize an Org"
  • Log in to the org to authorize

Deploy Package to Your Org

Right-click any directory of the Salesforce project in the Explorer and select "SFDX: Deploy Source to Org".

Alternatively, you can use the Salesforce CLI:

# authorize the org
sfdx org:login:web --alias <ALIAS> --set-default
# set it as the default
sfdx force:config:set defaultusername=<USERNAME>
# confirm your orgs
sfdx force:org:list

# the -u is optional for default org
sfdx force:source:convert -d mdapioutput/
sfdx force:mdapi:deploy -d mdapioutput/ -w 100 -u <USERNAME>

Resources