User Profile
SystemA830
Copper Contributor
Joined 6 months ago
User Widgets
Recent Discussions
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>382Views0likes1Comment
Groups
Recent Blog Articles
No content to show