Seamless Support: Integrating Salesforce Messaging for In-App and Web in WordPress

In today’s digital landscape, providing instant and accessible customer support is paramount. Salesforce Messaging for In-App and Web offers a powerful solution for engaging with your customers directly where they are – on your website or within your web application. This blog post will guide you through the process of setting up Salesforce Messaging for In-App and Web within your WordPress site, leveraging the flexibility of a custom HTML component.

The key to this integration lies in embedding the Salesforce chat functionality directly into your WordPress pages using a custom HTML block. This allows for a clean and efficient implementation without requiring complex plugin installations.

Let’s dive into the steps:

Step 1: Set Up Messaging for In-App and Web in Salesforce

The first crucial step is to configure your Messaging for In-App and Web within your Salesforce org.

1. Navigate to Embedded Service Deployments: In Salesforce Setup, use the Quick Find box to search for “Embedded Service Deployments” and select it.
2. Create a New Deployment (or Edit Existing): If you’re setting this up for the first time, click “New Deployment.” If you have an existing one you wish to use, click on its name to edit.
3. Configure Your Deployment: Follow the on-screen prompts to configure your messaging deployment. Crucially, when prompted for the domain, ensure you enter your exact WordPress domain (e.g., https://www.yourwordpressdomain.com). This is vital for the chat to function correctly and securely.
4. Customize Your Chat Experience: Within the deployment settings, you can customize various aspects of your chat, including the branding, pre-chat forms, agent routing, and more.

Step 2: Add Your WordPress Domain to Salesforce Trusted Domains for Inline Frames

To ensure that your Salesforce chat can be securely embedded within an iframe on your WordPress site, you need to whitelist your WordPress domain in Salesforce’s trusted domains list.

1. Navigate to Sites and Domains: In Salesforce Setup, use the Quick Find box to search for “Sites and Domains” and select “Sites.”
2. Select Your Messaging for In-App and Web Site: You will see a list of your Salesforce Sites. Your Messaging for In-App and Web Site will typically be formatted as ESW_[Embedded Service Deployment Name]_[Numbers]. Click on the label of this site.
3. Add Your WordPress Domain to Trusted Domains for Inline Frames: Scroll down to the “Trusted Domains for Inline Frames” section and click “New Trusted Domain.”
4. Enter Your WordPress Domain: Enter your full WordPress domain (e.g., https://www.yourwordpressdomain.com).
5. Save Your Changes: Click “Save” to apply the changes.

Step 3: Add Your WordPress Domain to Salesforce CORS

Cross-Origin Resource Sharing (CORS) is another security measure that needs to be configured to allow your WordPress site to make requests to Salesforce.

1. Navigate to CORS: In Salesforce Setup, use the Quick Find box to search for “CORS” and select it.
2. Add Your WordPress Domain: Click “New.”
3. Enter Your WordPress Domain: In the “Origin URL Pattern” field, enter your WordPress domain (e.g., https://www.yourwordpressdomain.com).
4. Save Your Changes: Click “Save.”

Step 4: Embed the Messaging Code in WordPress using a Custom HTML Component

Now that your Salesforce environment is configured, it’s time to add the chat functionality to your WordPress site.

1. Retrieve Your Embedded Service Code Snippet: Go back to your Salesforce Embedded Service Deployment settings. You will find a “Code Snippets” section. Copy the provided JavaScript code snippet. This code is unique to your deployment and is what will render the chat on your WordPress site.
2. Open Your WordPress Page or Post: Navigate to the WordPress page or post where you want the chat to appear.
3. Add a Custom HTML Block: In the WordPress editor (Gutenberg), click the “+” icon to add a new block. Search for “Custom HTML” and select it.
4. Paste Your Salesforce Code: Paste the entire Salesforce Embedded Service JavaScript code snippet into the Custom HTML block.Example of what the code might look like (this is a simplified example, your actual code will be longer and specific to your deployment).
5. Update and Publish Your WordPress Page: Save your changes in WordPress and publish or update the page.

Testing Your Integration

After completing these steps, visit your WordPress page where you embedded the code. You should now see the Salesforce Messaging for In-App and Web chat button or widget appear. Test the chat functionality to ensure it connects correctly and that you can initiate conversations with your agents.

By following these instructions, you can successfully integrate Salesforce Messaging for In-App and Web into your WordPress site, providing a direct and convenient channel for your customers to connect with your support team. This enhances the user experience and streamlines your customer service operations.

If you encounter any issues, double-check your domain entries in Salesforce (Trusted Domains and CORS) and ensure your WordPress domain precisely matches what you entered in your Salesforce Embedded Service Deployment. Happy chatting!

Output:

Quick Summary:

Custom HTML Component should be used in the WordPress Site to host Salesforce Messaging for In-App and Web chat.

1. Setup Messaging for In-App and Web. Use the following for reference. The domain should be your WordPress Domain when the Embedded Service Deployment is created.
2. Add the WordPress domain to the Trusted Domains for Inline Frames list in Setup –> User Interface –> Sites and Domains –> Sites, and select your Site. Messaging for In-App and Web Site is formatted as ESW_[Embedded Service Deployment Name]_[Numbers].
3. Add the WordPress domain to the Salesforce CORS in Setup.

Setup Salesforce Messaging for In-App and Web in Google Blogger Site