Unable to start copilot using customization and open it after some delay
I am customizing the copilot in power pages web template with given instruction https://learn.microsoft.com/en-us/microsoft-copilot-studio/customize-default-canvas?tabs=web/ and want to start conversation automatically with some delay. but it is not getting call.
below is my code
<!DOCTYPE html>
{% assign botconsumer = entities.adx_botconsumer[bot_consumer_id] %}
{% assign env = environment %}
{% assign languageCode = website.selected_language.code %}
{% assign botConfig = botconsumer.adx_configjson %}
{% assign delay = settings['pvaDelayTime'] %} //30 seconds delay for PVA to load on the form
<html lang="{{languageCode}}">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hub Virtual Assistant</title>
<style>
html, body {
height: 90%;
margin: 0;
}
#webchat-container {
position: fixed;
bottom: 0;
right: 0;
margin: 10px;
border-radius: 4px;
background-color: rgba(255, 255, 255, 0.85);
width: 500px;
height: 500px;
overflow: hidden;
z-index: 9999;
}
#webchat {
height: 89%; /* Adjust the height as needed */
overflow: auto;
}
#heading {
background-color: #5D025F;
padding: 13px 20px 0 20px;
margin-bottom: 10px;
display: flex;
justify-content: space-between;
align-items: center;
}
#heading h2 {
font-size: 16px;
font-family: Segoe UI;
line-height: 20px;
color: white;
margin: 0;
}
#toggle-button {
background: none;
border: none;
cursor: pointer;
color: white;
font-size: 24px;
}
.chat-icon {
width: 55px;
height: 50px;
background-color: #5D025F;
position: fixed;
bottom: 10px;
right: 5px;
border-radius: 50%;
background-image: url('{{ portal.context.baseUrl }}/Global/pva_chatbot.png');
background-repeat: no-repeat;
background-position: center;
background-size: 50%;
z-index: 9999;
}
</style>
</head>
<body>
<div id="webchat-container" class="pva-floating-style">
<div id="heading">
<h2>Hub Virtual Assistant</h2>
<button id="toggle-button" onclick="toggleWebChat()">-</button>
</div>
<div id="webchat" role="main"></div>
</div>
<script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
<script>
//Initially hide the chatbot container
document.getElementById('webchat-container').style.display = 'none';
const styleOptions = {
hideUploadButton: true,
backgroundColor: '#ffffff',
bubbleBackground: '#F2F2F2',
bubbleTextColor: '#262626',
botAvatarInitials: 'BOT',
userAvatarInitials:'YOU'
};
//retrive the bot environment id
const env_ID = "{{env.Id}}";
const envId = env_ID.replace(/-/g, '').slice(0, -2) + '.' + env_ID.slice(-2);
const theURL = "https://"+ envId +".environment.api.powerplatform.com/powervirtualagents/botsbyschema/{{ botconsumer.adx_botschemaname }}/directline/token?api-version=2022-03-01-preview";
let isWebChatMinimized = false;
//create store to get the build directline functionality to start bot automatically
const store = window.WebChat.createStore(
{},
({ dispatch }) => next => action => {
if (action.type === "DIRECT_LINE/CONNECT_FULFILLED") {
dispatch({
meta: {
method: "keyboard",
},
payload: {
activity: {
channelData: {
postBack: true,
},
name: 'startConversation',
type: "event"
},
},
type: "DIRECT_LINE/POST_ACTIVITY",
});
}
return next(action);
}
);
function toggleWebChat() {
const webChatContainer = document.getElementById('webchat-container');
const webChatHeading = document.getElementById('heading');
isWebChatMinimized = !isWebChatMinimized;
const toggleButton = document.getElementById('toggle-button');
if (isWebChatMinimized) {
webChatContainer.style.height = '50px';
webChatContainer.style.width = '50px';
webChatContainer.style.borderRadius = '50%';
//added image as bot icon
webChatHeading.innerHTML ='<div class="chat-icon" onclick="toggleWebChat()"></div>';
} else {
webChatContainer.style.height = '500px'; // Adjust the height as needed
webChatContainer.style.width = '500px';
webChatContainer.style.borderRadius = '0%';
webChatHeading.innerHTML ='<h2>Hub Virtual Assistant</h2><button id="toggle-button" onclick="toggleWebChat()">-</button>';
}
}
//set the delay for chatbot
setTimeout(() => {
// Show the chatbot container
document.getElementById('webchat-container').style.display = 'block';
//to start the conversation automatically
fetch(theURL)
.then(response => response.json())
.then(conversationInfo => {
window.WebChat.renderWebChat(
{
directLine: window.WebChat.createDirectLine({
token: conversationInfo.token,
}),
store: store,
styleOptions
},
document.getElementById('webchat')
);
})
.catch(err => console.error("An error occurred: " + err));
}, {{delay}}); //added the 30sec delay in opening of PVA chatbot
</script>
</body>
</html>
