Dialogflow Messenger - add welcome text before input

[asng]

I have created a simple agent that asks for a name, email and then answers based on a data store.

It all works great but when I embed it on a webpage I'd like it to show a message before any input. Something like "Let me know if you need any help".

I've had a good go at figuring out how this is done but I've had no luck. Can anyone help please?

[Mizar]

@asng your using dialogflow messenger?

Just put in the code of dfmessenger 

intent="eventName"
this eventName will be a custom event for the intent that triggers that message,

[Yash-Kavaiya · 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

[asng]

I've tried this and it doesn't seem to work so I must have gone wrong somewhere. This is what I've done:

Created an Event on my Start Page called WELCOME and in Agent Response I put the text I'd like it to have when it loads.

In the embed code I added the bit in bold:

<df-messenger
project-id="[ID]"
agent-id="[ID]"
language-code="en"
max-query-length="-1"
wait-open="true">

Straight after that I added this:

<script>
const dfMessenger = document.querySelector('df-messenger');
dfMessenger.addEventListener('onchatopen', () => {
dfMessenger.renderCustomText('WELCOME'); // Trigger custom event
});
</script>

Nothing appears on load so I must have gone wrong somewhere. Can you see where I've gone wrong? Thanks.

[nurrahmans]

I also encounter the same thing as you, here's what my code looks like :

<link rel="stylesheet" href="[link]">
<script src="[link]"></script>
<df-messenger
project-id="[ID]"
agent-id="[ID]"
language-code="en"
wait-open="true"
max-query-length="-1"
allow-feedback="all">
<df-messenger-chat-bubble
chat-title="HC Chatbot">
</df-messenger-chat-bubble>
</df-messenger>
<style>
df-messenger {
z-index: 999;
position: fixed;
--df-messenger-font-color: #000;
--df-messenger-font-family: Google Sans;
--df-messenger-message-user-background: #C6DAFC;
--df-messenger-message-bot-background: #fff;
bottom: 16px;
right: 16px;
}
</style>
<script>
const dfMessenger = document.querySelector('df-messenger');
dfMessenger.addEventListener('onchatopen', () => {
dfMessenger.renderCustomText('WELCOME'); // Trigger custom event
});
</script>