Set Up and Customize an Automated Invitation

Connect an automated chat invitation with your Snap-ins 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 Snap-ins 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 Live Agent deployment that you plan to use for your Snap-ins deployment. Then create or edit a Snap-ins deployment and select the Live Agent deployment and invitation for your Live Agent Settings.

Keep in mind that there are some differences to how invitations work in Snap-ins Chat versus Live Agent:

The position and animation don’t apply to customers using a mobile browser. They see the invitation above the snap-in with the “fade” animation type.
Custom animations aren’t supported.
The same fields that aren’t supported for Snap-ins chat buttons aren’t supported for Snap-ins 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 Snap-ins 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 . 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 Snap-ins deployment and regenerate the snippet. The default invitation uses the font, primary color, and secondary color that you selected in Snap-ins 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 Snap-ins 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 a Snap-ins 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 Snap-ins implementation. Make sure that you replace the information with your own when you use this sample.

Note

1<!-- Start of Invitations -->
2<div class="embeddedServiceInvitation" id="snapins_invite" aria-live="assertive" role="dialog" aria-atomic="true">
3    <div class="embeddedServiceInvitationHeader" aria-labelledby="snapins_titletext" aria-describedby="snapins_bodytext">
4        <img id="embeddedServiceAvatar">
5        <span class="embeddedServiceTitleText" id="snapins_titletext">Need help?</span>
6        <button type="button" id="closeInvite" class="embeddedServiceCloseIcon" aria-label="Exit invitation">&times;</button>
7    </div>
8    <div class="embeddedServiceInvitationBody">
9        <p id="snapins_bodytext">How can we help you?</p>
10    </div>
11    <div class="embeddedServiceInvitationFooter" aria-describedby="snapins_bodytext">
12        <button type="button" class="embeddedServiceActionButton" id="rejectInvite">Close</button>
13        <button type="button" class="embeddedServiceActionButton" id="acceptInvite">Start Chat</button>
14    </div>
15</div>
16
17<style type='text/css'>
18    #snapins_invite { background-color: #FFFFFF; font-family: "Salesforce Sans", sans-serif; overflow: visible; border-radius: 8px; visibility: hidden; }
19    .embeddedServiceInvitation { background-color: transparent; max-width: 290px; max-height: 210px; -webkit-box-shadow: 0 7px 12px rgba(0,0,0,0.28); -moz-box-shadow: 0 7px 12px rgba(0,0,0,0.28); box-shadow: 0 7px 12px rgba(0,0,0,0.28); }
20    @media only screen and (min-width: 48em) { /*mobile*/ .embeddedServiceInvitation { max-width: 332px; max-height: 210px; } }
21    .embeddedServiceInvitation > .embeddedServiceInvitationHeader { width: inherit; height: 32px; line-height: 32px; padding: 10px; color: #FFFFFF; background-color: #222222; overflow: initial; display: flex; justify-content: space-between; align-items: stretch; border-top-left-radius: 8px; border-top-right-radius: 8px; }
22    .embeddedServiceInvitationHeader #embeddedServiceAvatar { width: 32px; height: 32px; border-radius: 50%; }
23    .embeddedServiceInvitationHeader .embeddedServiceTitleText { font-size: 18px; color: #FFFFFF; overflow: hidden; word-wrap: normal; white-space: nowrap; text-overflow: ellipsis; align-self: stretch; flex-grow: 1; max-width: 100%; margin: 0 12px; }
24    .embeddedServiceInvitationHeader .embeddedServiceCloseIcon { border: none; border-radius: 3px; cursor: pointer; position: relative; bottom: 3%; background-color: transparent; width: 32px; height: 32px; font-size: 23px; color: #FFFFFF; }
25    .embeddedServiceInvitationHeader .embeddedServiceCloseIcon:focus { outline: none; }
26    .embeddedServiceInvitationHeader .embeddedServiceCloseIcon:focus::before { content: " "; position: absolute; top: 11%; left: 7%; width: 85%; height: 85%; background-color: rgba(255, 255, 255, 0.2); border-radius: 4px; pointer-events: none; }
27    .embeddedServiceInvitationHeader .embeddedServiceCloseIcon:active, .embeddedServiceCloseIcon:hover { background-color: #FFFFFF; color: rgba(0,0,0,0.7); opacity: 0.7; }
28    .embeddedServiceInvitation > .embeddedServiceInvitationBody { background-color: #FFFFFF; max-height: 110px; min-width: 260px; margin: 0 8px; font-size: 14px; line-height: 20px; overflow: auto; }
29    .embeddedServiceInvitationBody p { color: #333333; padding: 8px; margin: 12px 0; }
30    .embeddedServiceInvitation > .embeddedServiceInvitationFooter { width: inherit; color: #FFFFFF; text-align: right; background-color: #FFFFFF; padding: 10px; max-height: 50px; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; }
31    .embeddedServiceInvitationFooter > .embeddedServiceActionButton { font-size: 14px; max-height: 40px; border: none; border-radius: 4px; padding: 10px; margin: 4px; text-align: center; text-decoration: none; display: inline-block; cursor: pointer; }
32    .embeddedServiceInvitationFooter > #acceptInvite { background-color: #005290; color: #FFFFFF; }
33    .embeddedServiceInvitationFooter > #rejectInvite { background-color: #FFFFFF; color: #005290; }
34</style>
35
36<script type='text/javascript'>
37    (function() {
38        document.getElementById('closeInvite').onclick = function() { embedded_svc.inviteAPI.inviteButton.rejectInvite(); };
39        document.getElementById('rejectInvite').onclick = function() { embedded_svc.inviteAPI.inviteButton.rejectInvite(); }; // use this API call to reject invitations
40        document.getElementById('acceptInvite').onclick = function() { embedded_svc.inviteAPI.inviteButton.acceptInvite(); }; // use this API call to start chat from invitations
41        document.addEventListener('keyup', function(event) { if (event.keyCode == 27) { embedded_svc.inviteAPI.inviteButton.rejectInvite(); }})
42    })();
43</script>
44<!-- End of Invitations -->

Snap-Ins for Web Developer Guide

Set Up and Customize an Automated Invitation

Automated Invitation Code Example