LinkedIn
Twitter
1 ACCEPTED SOLUTION
To display a pre-chat message in Dialogflow CX before user input, configure a custom event trigger using JavaScript integration. Here’s how to implement it:
1. Configure Dialogflow CX Agent
Create a custom event handler in the Start Page of your flow:
Navigate to Build > Flows > Default Start Flow > Start Page.
Under Event handlers, click Add event handler.
Select Custom event and name it WELCOME (or a custom name).
Add your greeting text (e.g., "Let me know if you need any help") under Agent says.
Save the configuration12.
2. Modify HTML Integration
Add JavaScript to trigger the event when the chat widget loads:
xml
<df-messenger
chat-title="YourBot"
agent-id="YOUR_AGENT_ID"
language-code="en"
wait-open="true" <!-- Ensures event fires after chat opens -->
></df-messenger>
<script>
const dfMessenger = document.querySelector('df-messenger');
dfMessenger.addEventListener('onchatopen', () => {
dfMessenger.renderCustomText('WELCOME'); // Trigger custom event
});
</script>
wait-open="true" delays the event until the user interacts with the chat bubble3.
onchatopen fires when the chat interface is opened
