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>
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
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.
Thanks your response, I I referred to above link, and changed code but icon is not updated infornt of chat-title.I am using below code and chat-tltle-icon is not updated. please help me.
