Loading
Salesforce now sends email only from verified domains. Read More
Agentforce Contact Center
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
            Use Pre-Chat API to Pass Customer Information to the Service Rep in an Experience Site

            You are here:

            1. Salesforce Help
            2. Docs
            3. Agentforce Contact Center

            Use Pre-Chat API to Pass Customer Information to the Service Rep in an Experience Site

            To provide service reps with customer information that helps move an interaction forward, send end-user data to the service console via the pre-chat API.

            Required Editions

            View supported editions.
            Checkmark This article applies to: Enhanced Web Chat channels
            X icon This article doesn’t apply to: Enhanced In-App Chat, Enhanced WhatsApp, Standard and Enhanced Facebook Messenger, Standard and Enhanced SMS, Enhanced Apple Messages for Business, Enhanced LINE, and Bring Your Own Channel

            `

            This recipe combines common use cases as examples of data that you can send to service reps using the pre-chat API. First, pass the end user’s login ID to the rep so that verification is done. Then, to prevent loss on large orders, we pass the customer’s shopping cart value to the service rep. To accomplish these goals, create custom hidden pre-chat fields that route the data to Salesforce custom fields via a flow. Then edit the code snippet, telling it to auto-populate the hidden pre-chat fields.

            Before building this recipe, consider these caveats.

            • You can reference fields from the Messaging Session object or the Messaging User object (because it's linked to Messaging Session) in an auto-response formula template for Start Conversation, End Conversation, and Inactive Conversation. You can’t reference fields from the Messaging Session or Messaging User objects in Conversation
            • Salesforce custom object fields are different from pre-chat custom fields. This recipe references both types of fields. Learn more about the relationship and differences between these two types of fields.
            1. Create custom fields on Salesforce objects. In this example, create a Customer ID field and a Shopping Cart Value field on the messaging session or messaging user objects.
            2. If your Service Console doesn’t show the object where you stored the fields, edit the layout to give service reps easy access. In this example, we edit the Service Console to give easy access to the Messaging Session and Messaging User objects.
            3. To capture the data that gets sent to the Salesforce custom fields from step 1, create hidden pre-chat fields. In this example, create custom parameters called Customer ID and Shopping Cart Value in Messaging Settings for the channel, and then select them as hidden pre-chat fields in Embedded Services Pre-Chat Form settings.
            4. Map your custom pre-chat fields to your Salesforce custom fields, and then populate the Salesforce fields using a flow. In this example, we map the pre-chat field called Customer ID to the Salesforce field called Customer ID. Then we map the pre-chat field called Shopping Cart Value to the Salesforce field called Shopping Cart Value. With the flexibility of flows, you can combine or slice data or populate any other objects, such as Case or Contact, as needed.
            5. Create and deploy a custom LWC component that fetches the user information.
              1. In the newly created custom LWC component folder, here is a template of the custom component.
              2. The .js-meta.xml file. 
                <?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
   <apiVersion>55.0</apiVersion>
   <isExposed>true</isExposed>
   <masterLabel>[give a component name here]</masterLabel>
   <description>Set logged in User details for Embedded Messaging component</description>
   <targets>
       <target>lightningCommunity__Page</target>
       <target>lightningCommunity__Default</target>
   </targets>
</LightningComponentBundle>
              3. The .js file. 
                import { LightningElement, wire } from 'lwc';
import { getRecord, getFieldValue } from 'lightning/uiRecordApi';
import Id from '@salesforce/user/Id';
import First_Name from '@salesforce/schema/User.FirstName';
import Last_Name from '@salesforce/schema/User.LastName';
import Email from '@salesforce/schema/User.Email';


const fields = [First_Name, Last_Name, Email];


export default class EmbeddedMessagingSetRecordUser extends LightningElement {
   userId = Id;
   user;


   @wire(getRecord, { recordId: '$userId', fields })
   wiredRecord({ error, data }) {
       if (error) {
           let message = "Unknown error";
           if (Array.isArray(error.body)) {
               message = error.body.map((e) => e.message).join(", ");
           } else if (typeof error.body.message === "string") {
               message = error.body.message;
           }
           console.error("Error loading user record:" + message);
       } else if (data) {
           this.user = data;
           console.log('before custom event');
           var selectedEvent = new CustomEvent('userInfo',
                   {
                       detail: {
                           fname: getFieldValue(this.user, First_Name),
                           lname : getFieldValue(this.user, Last_Name),
                           email: getFieldValue(this.user, Email)
                       },
                       bubbles: true,
                       composed: true
                   });


           // Dispatches the event.
           window.dispatchEvent(selectedEvent);
       }
   }
}
              4. The .html file. 
                <template></template>
            6. In the Experience Site Builder, drag your custom LWC component into the template footer.
            7. Go to Settings → Advanced → Edit Head Markup, paste the following sample script into the head markup. 
              <script>
    var fname, lname, email;
    window.addEventListener('userInfo', function(e){
        console.log("userInfo received");
        fname = e.detail.fname;
        lname = e.detail.lname;
        email = e.detail.email;
    });
    window.addEventListener("onEmbeddedMessagingReady", e => {
        embeddedservice_bootstrap.prechatAPI.setVisiblePrechatFields({
            "_firstName": {
                "value": fname,
                "isEditableByEndUser": true
            },
            "_lastName": {
                "value": lname,
                "isEditableByEndUser": true
            },
            "_email": {
                "value": email,
                "isEditableByEndUser": true
            }
        });
    });
</script>
            8. Update your embedded messaging code snippet, instructing it to auto-populate the pre-chat fields that you created in step 2. The code in this example uses the Pre-Chat API to send Customer ID and Shopping Cart Value to your pre-chat fields automatically. Before adding to your code snippet, consider these caveats.
              1. The first section of the code contains an example of the standard code snippet for your Embedded Service deployment. Yours looks slightly different due to your unique deployment ID and name.
              2. To complete the recipe, add the code that starts with the comment line Passing Web Context to Prechat - BEGIN.
              3. The first section assigns static values to these variables, but you can change them to reflect how you get these values. The next section populates the visible pre-chat fields. The final section populates hidden pre-chat fields.
              4. We use different code settings in assigning the values. For example, the first and last names are locked and not editable by users.
              5. Your page or site template must have the Embedded Messaging component.
              6. An Experience site doesn’t allow you to directly paste in a code snippet. Include Prechat API in the header markup. Add your code at Experience Builder → Settings → Advanced → Edit Head Markup.
              7. In the Experience site code sample, we don’t include a baseline code snippet, such as the initEmbeddedMessaging() function. That’s because such baseline code is already included in the Embedded Messaging LWC component.
              8. This example includes an event listener on userInfo. This sends a logged-in customer’s information directly to the prechat form without asking the customer to enter it again. The example makes the fields editable by customers. You can also change the isEditableByEndUser configuration to lock it down.
             
            Loading
            Salesforce Help | Article