Embedded Service for Web Developer Guide

Embedded Service for Web Developer Guide
Customize Your Embedded Component
Customize Embedded Chat
Customize Chat Parameters
Set Up and Customize an Automated Invitation
Get Chat Event Notifications
Add Mobile Accessibility for Chat
Create Custom Chat Events
Bootstrap Embedded Chat
Start, End, and Clear Embedded Chat Sessions
Create a Snippet Settings File
Enhance Pre-Chat
Customize the Channel Menu
Embedded Service Customized Components
Code Snippet Versions
PDF

Newer Version Available

This content describes an older version of this product. View Latest

Set Up and Customize an Automated Invitation

Connect an automated chat invitation with your Embedded Service deployment to proactively invite your customers to start a chat with an agent. Your invitation can slide, fade, or appear anywhere on the page based on the criteria you selected in Setup. You can also use your own HTML and CSS to make it match your company’s branding. Upgrade your code snippet to version 4.0 to use invitations.

Before you write any code, set up your invitation and Embedded Service deployment in Setup. From Salesforce Classic Setup, enter Chat Buttons in the Quick Find box, then select Chat Buttons & Invitations. Connect the invitation to the Chat deployment that you plan to use for your Embedded Service deployment. Then create or edit a Embedded Service deployment and select the Chat deployment and invitation for your Chat Settings.

Keep in mind that there are some differences to how invitations work in Embedded Chat versus a regular Chat deployment:
  • The position and animation don’t apply to customers using a mobile browser. They see the invitation above the chat button with the “fade” animation type.
  • Custom animations aren’t supported.
  • The same fields that aren’t supported for Embedded Chat buttons aren’t supported for Embedded Chat invitations: Pre-Chat Form Page, Pre-Chat Form URL, Custom Chat Page, Invitation Image, and Site for Resources.
  • You can’t use invitations with the Embedded Chat component in your Community.

When you have an invitation in your deployment and a 4.0 code snippet, there’s a section of the code snippet that begins with <!-- Invitations - Static HTML/CSS/JS -->. This is where you define some behavior for the invitation and add your own HTML and CSS (if you want to).

If you use your own HTML and CSS, remember the following:
  • Wrap the HTML properly: <div id=”snapins_invite></div>. The <div> must also have a CSS property of visibility: hidden to ensure that the animations and rules work as you specified in Setup.
  • We generate the default HTML and CSS for you when you add an invitation to your Embedded Chat deployment and regenerate the snippet. The default invitation uses the font, primary color, and secondary color that you selected in Embedded Service setup.
  • When you set an avatar image (set by defining embedded_svc.settings.avatarImgURL in your code snippet), the image appears in the top left of the invitation with the default HTML and CSS.
When you use invitations, there are two JavaScript functions to override in the Embedded Service code snippet:
  • embedded_svc.inviteAPI.inviteButton.acceptInvite()
  • embedded_svc.inviteAPI.inviteButton.rejectInvite()
If you’re using custom variable rules, also use this function:
  • embedded_svc.inviteAPI.inviteButton.setCustomVariable()

Automated Invitation Code Example

The following code example shows the default HTML, CSS, and JavaScript functions in the code snippet. This code is included in your version 4.0 and later code snippet when you add an invitation to an Embedded Chat deployment and regenerate the code snippet.

The provided code sample uses object field names, org IDs, button IDs, and stylesheets that possibly don’t work in your Embedded Service implementation. Make sure that you replace the information with your own when you use this sample.

Note