Auto-Start Salesforce Agentforce Service Agent with Custom Messages in Enhanced Chat
In the world of digital customer service, the standard “Chat Now” button is often not enough. To truly engage customers, businesses are moving toward personalized, proactive experiences. If you are using Salesforce Enhanced Messaging (MIAW) and Agentforce Service Agents, you might want to bypass the standard chat button, build your own UI, and automatically launch the agent with specific context.
In this guide, we will walk through how to create a custom HTML interface that auto-starts a Salesforce Enhanced Chat session and programmatically sends a message to the Agentforce Agent.
Why Build a Custom Chat Interface?
The standard Salesforce Embedded Messaging widget is powerful, but sometimes you need:
- Specific Recommendations: Static buttons like “Help with Order” or “Case Status.”
- Seamless Styling: A UI that matches your website’s CSS perfectly before the chat window loads.
- Contextual Starts: Passing a specific phrase to the Agentforce Agent to trigger a specific topic or intent immediately.
The Solution Overview
To achieve this, we will utilize the Enhanced Chat APIs and Events. The logic follows this flow:
- Hide the default Salesforce chat button upon loading.
- Display a custom HTML form with options (buttons) and an input field.
- Launch the chat programmatically when a user interacts with your custom UI.
- Send the user’s input to the chat window automatically to trigger the Agent.
- Toggle visibility between your custom UI and the Salesforce chat window using Event Listeners.
Key API Methods Used
Before looking at the full code, let’s understand the core methods involved:
1. Hiding the Default Button
To prevent the standard floating button from appearing, we configure the settings immediately:
embeddedservice_bootstrap.settings.hideChatButtonOnLoad = true;
2. Launching the Chat
We use the utilAPI to manually trigger the chat window. This returns a Promise.
embeddedservice_bootstrap.utilAPI.launchChat()
3. Sending the Message
Once the chat is launched and the Agent is ready, we send the text. This mimics the user typing a message and hitting enter.
embeddedservice_bootstrap.utilAPI.sendTextMessage(message)
4. Event Listeners for UI State
To ensure the custom UI disappears when the chat opens and reappears when it closes, we listen for specific events:
onEmbeddedMessagingConversationOpenedonEmbeddedMessagingWindowClosedonEmbeddedMessagingButtonCreated
Full Implementation Code
Below is the complete HTML, CSS, and JavaScript solution. This example creates a clean card interface with “Order” and “Case” buttons, plus a manual input field.
<html lang="en">
<head>
<title>Chat</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f7f8fa;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.chat-container {
background: #fff;
border: 1px solid #ddd;
border-radius: 10px;
width: 400px;
padding: 16px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
}
.chat-input-area {
display: flex;
border: 1px solid #ccc;
border-radius: 20px;
padding: 8px 12px;
background: #f1f1f1;
}
.chat-input {
flex: 1;
border: none;
background: transparent;
outline: none;
font-size: 16px;
padding: 6px;
}
.send-button {
background-color: #0078ff;
border: none;
color: white;
border-radius: 50%;
width: 36px;
height: 36px;
cursor: pointer;
font-size: 16px;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s;
}
.send-button:hover {
background-color: #005fd1;
}
/* --- CSS for Styling the Button --- */
.send-message-button {
background-color: #00008b;
color: white;
padding: 15px 30px;
font-size: 18px;
font-weight: bold;
cursor: pointer;
border: none;
display: inline-block;
text-align: center;
border-radius: 5px;
box-shadow: 0 0 0 2px white;
outline: 2px solid #00008b;
}
.send-message-button:hover {
background-color: #0000a0;
}
</style>
<script type = "text/javascript">
function initEmbeddedMessaging() {
try {
embeddedservice_bootstrap.settings.language = 'en_US'; // For example, enter 'en' or 'en-US'
// Hiding Chat Button on page load
embeddedservice_bootstrap.settings.hideChatButtonOnLoad = true;
/* START:: Conversation Opened Listener */
window.addEventListener("onEmbeddedMessagingConversationOpened", (event) => {
hideChatContainer();
});
/* END:: Conversation Opened Listener */
/* START:: Conversation Closed Listener */
window.addEventListener("onEmbeddedMessagingWindowClosed", (event) => {
showChatContainer();
});
/* END:: Conversation Closed Listener */
/* START:: Button Created Listener */
window.addEventListener("onEmbeddedMessagingButtonCreated", (event) => {
showChatContainer();
});
/* END:: Button Created Listener */
embeddedservice_bootstrap.init(
'00DKj00000BqFBw',
'Enhanced_Chat',
'https://<Your URL>',
{
scrt2URL: '<Your Domain>-scrt.com'
}
);
} catch (err) {
console.error('Error loading Embedded Messaging: ', err);
}
}
</script>
<script
type = 'text/javascript'
src = 'https://<Your URL>/assets/js/bootstrap.min.js'
onload = 'initEmbeddedMessaging()'>
</script>
</head>
<body>
<div>
Welcome to our Chat Service!
<br/><br/>
</div>
<div class="chat-container">
<div>
Please select the menu or enter the message to get started.
<br/>
</div>
<div>
<br/><br/>
<button class="send-message-button" id="orderButton">
Need help with my Order
</button>
<br/><br/>
<button class="send-message-button" id="caseButton">
Need help with my Case
</button>
<br/><br/>
</div>
<div class="chat-input-area">
<input type="text" id="chatInput" class="chat-input" placeholder="Type a message..." />
<button class="send-button" id="sendBtn">➤</button>
</div>
</div>
<script>
function showChatContainer() {
const chatContainer = document.querySelector('.chat-container');
chatContainer.style.display = 'block';
}
function hideChatContainer() {
const chatContainer = document.querySelector('.chat-container');
chatContainer.style.display = 'none';
}
function launchChat(message) {
embeddedservice_bootstrap.utilAPI.launchChat()
.then(() => {
console.log('Successfully launched Messaging');
sendMessageToChat(message);
})
.catch(() => {
console.log('Some error occurred when launching Messaging');
})
.finally(() => {
console.log('Successfully launched Messaging - Finally');
});
}
function sendMessageToChat(message) {
setTimeout(() => {
embeddedservice_bootstrap.utilAPI.sendTextMessage(message)
.then(() => {
console.log("Message sent");
})
.catch(() => {
console.log("Message not sent");
})
.finally(() => {
console.log("Message sent - finally");
});
}, 8000);
}
const sendBtn = document.getElementById('sendBtn');
const chatInput = document.getElementById('chatInput');
sendBtn.addEventListener('click', () => {
const message = chatInput.value.trim();
if (message) {
console.log(message);
chatInput.value = '';
hideChatContainer();
launchChat(message);
} else {
alert("Please enter a message first!");
}
});
// Allow pressing Enter to send the message
chatInput.addEventListener('keypress', (e) => {
if (e.key === 'Enter') {
sendBtn.click();
}
});
// Get the button element using its ID
const orderButton = document.getElementById('orderButton');
// Add an event listener that runs a function when the button is clicked
orderButton.addEventListener('click', function() {
// Get the text content of the button
const orderButtonText = orderButton.textContent.trim();
// Display the text in the browser's console
console.log(orderButtonText);
launchChat(orderButtonText);
});
// Get the button element using its ID
const caseButton = document.getElementById('caseButton');
// Add an event listener that runs a function when the button is clicked
caseButton.addEventListener('click', function() {
// Get the text content of the button
const caseButtonText = caseButton.textContent.trim();
// Display the text in the browser's console
console.log(caseButtonText);
launchChat(caseButtonText);
});
</script>
</body>
</html>
Conclusion/Summary
Customers typically use chat to report issues or check their status. Instead of making them wait for an AI agent to connect before they can speak, this new approach allows them to immediately select a topic or start typing their concern.