Customizing the look (and other defaults) of your Dialogflow Agent

After you’ve gotten your agent on your site (for steps on how to do this check out this post), you can customize the look and feel of your agent.

Expanding your agent by default

if you’d like your agent to be “open” upon the user hitting your page, set the expand param on your df-messenger to true:

<df-messenger
  intent="WELCOME"
  chat-title="WADDUP"
  agent-id="12456zzaa78-1122-345c6-7aae-8901b011e2bd"
  language-code="en"
  expand="true"
></df-messenger>

Setting the default Intent

The default intent your agent starts with is set in the intent attribute — you can change it to any value that matches any of your Intents (the Intents screen in your Dialogflow console):

<df-messenger
  intent="WELCOME"
  chat-title="WADDUP"
  agent-id="12456zzaa78-1122-345c6-7aae-8901b011e2bd"
  language-code="en"
></df-messenger>

Changing the colors of your agent

You will want to add the following to your styles. The code is somewhat self-explanatory so go ahead and play around with it.

<style> 
df-messenger { 
--df-messenger-bot-message: #E5E8E8; 
--df-messenger-button-titlebar-color: #384E81; 
--df-messenger-chat-background-color: #E5E7EC; 
--df-messenger-font-color: #54565B; 
--df-messenger-user-message: #A6B7DE; } 
</style>