LinkedIn
Twitter
I want update logo and title in beside chat tite and when user chat to bot conversion in every chat chat conversion update the title or logo in dialogflow bot. I am using below script code, but it is not working
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dialogflow Messenger Integration</title>
<script src="https://www.gstatic.com/dialogflow-console/fast/messenger/bootstrap.js?v=1"></script>
<style>
/* Custom styles */
df-messenger {
--df-messenger-bot-message: #878fac;
--df-messenger-button-titlebar-color: #df9b56;
--df-messenger-chat-background-color: #fafafa;
--df-messenger-font-color: white;
--df-messenger-send-icon: #878fac;
--df-messenger-user-message: #0b5e55;
}
/* Order elements in the title bar */
.df-messenger-titlebar {
display: flex;
flex-direction: row; /* or row-reverse */
}
/* Style for the title bar icon */
.df-messenger-titlebar-icon {
width: 18px; /* Width of the icon */
height: 18px; /* Height of the icon */
padding: 0 12px 0 0; /* Padding around the icon */
}
/* Chat bubble styles */
.df-messenger-chat-bubble {
width: 64px;
height: 64px;
background-color: #0b57d0;
border-radius: 32px;
border: none;
}
/* Chat bubble icon styles */
.df-messenger-chat-bubble-icon {
width: 36px;
height: 36px;
color: white;
}
/* Close icon styles */
.df-messenger-chat-bubble-close-icon {
width: 24px;
height: 24px;
color: white;
transform: rotate(-90deg); /* Initial rotation */
}
/* Animation for close icon */
.df-messenger-chat-bubble.is-closed .df-messenger-chat-bubble-close-icon {
transform: rotate(0deg); /* Rotate to 0deg when chat is closed */
}
</style>
</head>
<body>
<df-messenger
intent="WELCOME"
agent-id="xxxxxxxxxxxxxxx"
language-code="en"
chat-title="chat"
chat-title-icon="https://img.freepik.com/premium-vector/chat-logo-with-robot-face_1124-277.jpg"
chat-icon="https://img.freepik.com/premium-vector/chat-logo-with-robot-face_1124-277.jpg"
expand="true"
></df-messenger>
</body>
</html>like below image
Thanks your response I removed -- in code and test but not working. The below code is changed, I want to update icon infornt of chat-title and when user chat to bot conversion in every chat chat conversion update the title or logo in dialogflow bot
<html>
<head>
<title>Student helpdesk - Demo</title>
<meta name="viewport" content="width-device-width, initial-scale=1">
<script src="https://www.gstatic.com/dialogflow-console/fast/messenger/bootstrap.js?v=1"></script>
<style>
df-messenger {
--df-messenger-bot-message: #878fac;
--df-messenger-button-titlebar-color: #df9b56;
--df-messenger-chat-background-color: #fafafa;
--df-messenger-font-color: white;
--df-messenger-send-icon: #878fac;
--df-messenger-user-message: #479b3d;
}
</style>
</head>
<body>
<df-messenger
id="df-messenger"
intent="WELCOME"
chat-title="Chat"
chat-title-icon="https://i.postimg.cc/k2sF8tNr/aitorch-logo.png"
chat-icon="https://i.postimg.cc/k2sF8tNr/aitorch-logo.png"
agent-id="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
language-code="en">
</df-messenger>
</body>
</html>
Thanks, Xavidip for the response. I referred to above links. I am using the below script code to make changes, but it is not working. please help me I need change icon infornt of chat-title like below image.
<html>
<head>
<title>Student helpdesk - Demo</title>
<meta name="viewport" content="width-device-width, initial-scale=1">
<script src="https://www.gstatic.com/dialogflow-console/fast/messenger/bootstrap.js?v=1"></script>
<style>
df-messenger {
--df-messenger-bot-message: #878fac;
--df-messenger-button-titlebar-color: #df9b56;
--df-messenger-chat-background-color: #fafafa;
--df-messenger-font-color: white;
--df-messenger-send-icon: #878fac;
--df-messenger-user-message: #479b3d;
--df-messenger-titlebar-icon-width: 18px;
--df-messenger-titlebar-icon-height: 18px;
--df-messenger-titlebar-icon-padding: 0 12px 0 0;
--df-messenger-titlebar-title-order: row
}
</style>
</head>
<body>
<df-messenger
id="df-messenger"
intent="WELCOME"
agent-id="60b95b24-5296-459b-b477-e3d9d034bfff"
chat-title="Chat"
chat-title-icon="https://i.postimg.cc/k2sF8tNr/aitorch-logo.png"
chat-icon="https://i.postimg.cc/k2sF8tNr/aitorch-logo.png"
chat-collapse-icon="https://i.postimg.cc/k2sF8tNr/aitorch-logo.png"
chat-close-icon="https://i.postimg.cc/HxfCQHWq/logo-1-cropped.jpg"
language-code="en">
</df-messenger>
</body>
</html>
