Dialogflow Messenger - add welcome text before input

Google Cloud Build with AI Conversational Agents (Dialogflow CX)
1

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?

1 Like
2

@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,

1 Like
3

Screenshot_20250201_075440_Chrome.jpg
Screenshot_20250201_075440_Chrome.jpg1079×1502 123 KB

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”

wait-open=“true” delays the event until the user interacts with the chat bubble3.
onchatopen fires when the chat interface is opened

4

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:

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

1 Like
5

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

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; }