Unable to start copilot using customization and open it after some delay
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>
Unable to start copilot using customization and open it after some delayI 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 containerdocument.getElementById(‘webchat-container’).style.display = ‘none’;const styleOptions = {hideUploadButton: true,backgroundColor: ‘#ffffff’,bubbleBackground: ‘#F2F2F2’,bubbleTextColor: ‘#262626’,botAvatarInitials: ‘BOT’,userAvatarInitials:’YOU’};//retrive the bot environment idconst 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 automaticallyconst 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 iconwebChatHeading.innerHTML ='<div class=”chat-icon” onclick=”toggleWebChat()”></div>’;} else {webChatContainer.style.height = ‘500px’; // Adjust the height as neededwebChatContainer.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 chatbotsetTimeout(() => {// Show the chatbot containerdocument.getElementById(‘webchat-container’).style.display = ‘block’;//to start the conversation automaticallyfetch(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> Read More