Loading
Explore Legacy Service Features
Table of Contents
Filter by (0)Add
Select Filters

          No results
          No results
          Here are some search tips

          Check the spelling of your keywords.
          Use more general search terms.
          Select fewer filters to broaden your search.

            Search all of Salesforce Help
            Search all of Salesforce Help
            Experience Site Static Resource Files

            You are here:

            1. Salesforce Help
            2. Docs
            3. Legacy Service Features

            Experience Site Static Resource Files

            Create JavaScript files to upload as a static resource and apply to Embedded Chat for your Experience Cloud site. Here’s a code example for chat invitations to get you started.

            Required Editions

            View supported editions for Chat.
            View supported editions for Channel Menu.
            User Permissions Needed
            To create and edit static resources: Customize Application AND Author Apex
            Important
            Important

            Legacy Chat will be retired on February 14, 2026. To avoid service interruptions to your end users, switch to enhanced Chat (formerly Messaging for In-App and Web). Enhanced Chat offers many of the legacy Chat features that you love plus asynchronous conversations that can be picked back up at any time. Learn about migrating in Help and Trailhead.

            Here is sample JavaScript code to upload as a static resource and invite your customers to chat on your site pages (not available for external web pages). To create the file:

            1. Specify _invitationResource on the Global window object
              window._invitationResource = (function() {})();
              Tip
              Tip The contents of the file are loaded on to window object. Make your CSS classes and HTML ids as specific as possible.
            2. Set invitation HTML to embedded_svc.config.invitation.htmlMarkup
            3. Set invitation CSS to embedded_svc.config.invitation.styles
            4. Set invitation JS to embedded_svc.config.invitation.invitationAPIs 
              window._invitationResource = (function() {
    console.log("Chat invitation file loaded");

    embedded_svc.config.invitation.htmlMarkup = '';
    // Insert invitation's custom HTML markup

    embedded_svc.config.invitation.styles = '';
    // Insert invitation's CSS styles (be specific!)

    embedded_svc.config.invitation.invitationAPIs = '';
    // Utilize these existing methods to accept/reject invites:
    // - embedded_svc.inviteAPI.inviteButton.acceptInvite()
    // - embedded_svc.inviteAPI.inviteButton.rejectInvite();
})();

            Here is the full code sample for a standard chat invitation. Add your image URL link for the embeddedServiceAvatar.

            window._invitationResource = (function() {
    console.log("Invitation loaded");

    embedded_svc.config.invitation.htmlMarkup =
        '<div class="embeddedServiceInvitation" id="snapins_invite" inert="true" aria-live="assertive" role="dialog" aria-atomic="true">'+
            '<div class="embeddedServiceInvitationHeader" aria-labelledby="snapins_titletext" aria-describedby="snapins_bodytext">'+
                '<img id="embeddedServiceAvatar" src="https://yourimagehere.png"></img>'+
                '<span class="embeddedServiceTitleText" id="snapins_titletext">Need help?</span>'+
                '<button type="button" id="closeInvite" class="embeddedServiceCloseIcon" aria-label="Exit invitation">&times;</button>'+
            '</div>'+
            '<div class="embeddedServiceInvitationBody">'+
                '<p id="snapins_bodytext">How can we help you?</p>'+
            '</div>'+
            '<div class="embeddedServiceInvitationFooter" aria-describedby="snapins_bodytext">'+
                '<button type="button" class="embeddedServiceActionButton" id="rejectInvite">Close</button>'+
                '<button type="button" class="embeddedServiceActionButton" id="acceptInvite">Start Chat</button>'+
            '</div>'+
        '</div>';

    embedded_svc.config.invitation.styles =
        '#snapins_invite { background-color: #FFFFFF; font-family: "Arial", sans-serif; overflow: visible; border-radius: 8px;}'+
        '.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); }'+
        '@media only screen and (min-width: 48em) { /*mobile*/ .embeddedServiceInvitation { max-width: 332px; max-height: 210px; } }'+
        '.embeddedServiceInvitation > .embeddedServiceInvitationHeader { width: inherit; 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; }'+
        '.embeddedServiceInvitationHeader #embeddedServiceAvatar { width: 32px; height: 32px; border-radius: 50%; }'+
        '.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; }'+
        '.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; }'+
        '.embeddedServiceInvitationHeader .embeddedServiceCloseIcon:focus { outline: none; }'+
        '.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; }'+
        '.embeddedServiceInvitationHeader .embeddedServiceCloseIcon:active, .embeddedServiceCloseIcon:hover { background-color: #FFFFFF; color: rgba(0,0,0,0.7); opacity: 0.7; }'+
        '.embeddedServiceInvitation > .embeddedServiceInvitationBody { background-color: #FFFFFF; max-height: 110px; min-width: 260px; margin: 0 8px; font-size: 14px; line-height: 20px; overflow: auto; }'+
        '.embeddedServiceInvitationBody p { color: #333333; padding: 8px; margin: 12px 0; }'+
        '.embeddedServiceInvitation > .embeddedServiceInvitationFooter { width: inherit; color: #FFFFFF; text-align: right; background-color: #FFFFFF; padding: 10px; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; }'+
        '.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; }'+
        '.embeddedServiceInvitationFooter > #acceptInvite { background-color: #005290; color: #FFFFFF; }'+
        '.embeddedServiceInvitationFooter > #rejectInvite { background-color: #FFFFFF; color: #005290; }';

    embedded_svc.config.invitation.invitationAPIs =
        '(function() {'+
            'document.getElementById("closeInvite").addEventListener("click", function() { embedded_svc.inviteAPI.inviteButton.rejectInvite(); });'+
            'document.getElementById("rejectInvite").addEventListener("click", function() { embedded_svc.inviteAPI.inviteButton.rejectInvite(); });'+
            'document.getElementById("acceptInvite").addEventListener("click", function() { embedded_svc.inviteAPI.inviteButton.acceptInvite(); });'+
            'document.addEventListener("keyup", function(event) { if (event.keyCode == 27) { embedded_svc.inviteAPI.inviteButton.rejectInvite(); }})'+
        '})();';
})();

            When your file is complete, return to Embedded Static Resources for static resource upload instructions.

             
            Loading
            Salesforce Help | Article