---
schema_version: "1"
id: 56db0c658680c14b0b20f5ff74710b9fbc01550e29918b85dd6726c5e55cd92c
title: Experience Site Static Resource Files
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/service/264-0-0/embedded_chat_community_static_examples.md
canonical_url: https://help.salesforce.com/s/articleView?id=service.embedded_chat_community_static_examples.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: 178935336161ed8f9574de7d014cc85c3dfd5d8de7d1c09259b6b7778014d828
description: 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.
products:
  - Service Cloud
release: "264"
---
# 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

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small edition"><colgroup><col></colgroup><tbody><tr class=""><td class="slds-cell-wrap" style="vertical-align:top;"><a href="https://help.salesforce.com/s/articleView?id=service.legacy_editions.htm&amp;language=en_US" target="_blank">View supported editions for Chat</a>.</td></tr><tr class=""><td class="slds-cell-wrap" style="vertical-align:top;"><a href="https://help.salesforce.com/s/articleView?id=service.embedded_menu_editions.htm&amp;language=en_US" target="_blank">View supported editions for Channel Menu</a>.</td></tr></tbody></table>

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small permission">
        <colgroup>
          <col style="width:50%">
          <col style="width:50%">
        </colgroup>
        <thead class="slds-text-title_caps ">
          <tr class="">
            <th scope="colgroup" class="slds-cell-wrap" colspan="2" style="text-align:center;vertical-align:top;" id="d39492e69">User
              Permissions Needed</th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="User Permissions Needed" class="slds-cell-wrap" style="vertical-align:top;" headers="d39492e69 ">To create and edit static resources:</td>

            <td class="slds-cell-wrap" style="vertical-align:top;" headers="d39492e69 ">Customize Application AND Author Apex</td>

          </tr>
        </tbody>
      </table>

![Important](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-service-support_legacy-264-0-0-production-enus/081af4ec-6c06-4d4b-9443-cb3516bbc46d/images/icon_important.png)

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](https://help.salesforce.com/s/articleView?id=service.miaw_replacing_chat_considerations.htm&language=en_US) plus asynchronous conversations that can be picked back up at any time. Learn about migrating in [Help](https://help.salesforce.com/s/articleView?id=service.miaw_replacing_chat_considerations.htm&type=5&language=en_US) and [Trailhead](https://trailhead.salesforce.com/content/learn/modules/migrating-from-legacy-chat-to-enhanced-chat).

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](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-service-support_legacy-264-0-0-production-enus/081af4ec-6c06-4d4b-9443-cb3516bbc46d/images/icon_tip.png)
    
    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](https://help.salesforce.com/articleView?id=embedded_static_resources.htm&language=en_US) for static resource upload instructions.