cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
fernandosilva
Helper V
Helper V

Keep bot conversation when user change website page

Hi there,

 

I would like to know if there is a way to keep the bot conversation when user change the website page.

At this moment when the chatbot reset as soon as the page change and the user need to start all over again.

How can the conversation stays in place in different website pages?

 

Thanks in advance.


Fernando

1 ACCEPTED SOLUTION

Accepted Solutions
jbmsft
Microsoft
Microsoft

Hi @fernandosilva - both provided links are for PVA. You'll want to combine the sample code from the documentation site with the code from the pastebin in order to persist the chat across sessions. It should look like this in the end: https://pastebin.com/9e5eNXkC

View solution in original post

8 REPLIES 8
jbmsft
Microsoft
Microsoft

Hi Fernando,

 

Are you using the custom canvas implementation of PVA? If so, and you followed this guide: Automatically start a chatbot conversation - Power Virtual Agents | Microsoft Docs, you can store the Direct Line token in sessionStorage to persist a chat session across page navigation. Here is some sample code: https://pastebin.com/euJe2eA7

Hi @jbmsft ,

 

Thanks for your reply.

I noticed that you posted the links related to Bot Framework Composer, but in this case I'm talking about PVA and from the sample on the tutorials, I got the following:

 

 

<!DOCTYPE html>
<html>
<head>
    <title>My Bot</title>
    <link rel="stylesheet" href="style.min.css">
</head>
<body>
    <div>
        <div id="heading">
            <!-- Change the h1 text to change the bot name -->
            <div class="headingFirst">
                <h1 class="chatboth1header">My Bot</h1>
            </div>
            <div class="headingSecond">
            </div>
        </div>
        <div id="webchat" role="main"></div>
    </div>
    <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
    <script>
        const styleSet = window.WebChat.createStyleSet({
            // Add styleOptions to customize Web Chat canvas
            bubbleBackground: 'rgba(0, 0, 255, .1)',
            bubbleFromUserBackground: 'rgba(0, 255, 0, .1)',
            rootHeight: '100%',
            rootWidth: '100%',
            backgroundColor: 'white',
            hideUploadButton: false,
            userAvatarBackgroundColor: 'white',
            botAvatarBackgroundColor: 'white',

        });
        // Set the avatar options. 
        const avatarOptions = {
            backgroundColor: 'white',
            botAvatarBackgroundColor: 'rgba(255, 255, 255, 1)',
            // accent: 'rgba(255, 255, 255, 1)',
            botAvatarInitials: 'MPID',
            userAvatarInitials: 'ME',

        };
            // Add your BOT ID below 
            var BOT_ID = "my_bot_id";
            var theURL = "https://powerva.microsoft.com/api/botmanagement/v1/directline/directlinetoken?botId=" + BOT_ID;
        

        fetch(theURL)
            .then(response => response.json())
            .then(conversationInfo => {
                window.WebChat.renderWebChat({
                        directLine: window.WebChat.createDirectLine({
                            token: conversationInfo.token,
                        }),
                        styleSet,
                        styleOptions: avatarOptions
                    },
                    document.getElementById('webchat')
                );
            })
            .catch(err => console.error("An error occurred: " + err));
    </script>
</body>

</html>

 

So, my bot id is the id from my PVA bot.

 

I inserted the bot on my site through an iframe and when I change the page the conversation disappear and the user have to start all over again.

 

If there is a better way to do it using PVA credentials, please share with the community.

 

Kind regards,

 

Fernando

jbmsft
Microsoft
Microsoft

Hi @fernandosilva - both provided links are for PVA. You'll want to combine the sample code from the documentation site with the code from the pastebin in order to persist the chat across sessions. It should look like this in the end: https://pastebin.com/9e5eNXkC

fernandosilva
Helper V
Helper V

Hi @jbmsft ,

 

That's the one. 

 

I hope the whole community can use your template, which works well.

 

Thank you for your feedback and quick reply.

jbmsft
Microsoft
Microsoft

@fernandosilva this is great to hear! Glad it worked for you.

JoseKPG
Regular Visitor

@jbmsft I'm fairly new at this and have been having issues combining the codes mentioned. I also used the code from pastebin and the webchat is not rendering. Should the code work by using the full pastebin code or is something missing?

Hi Jose, the original pastebin had some extra variables that the other user needed. Here's a new one that should work, and only thing you should need to change is adding your real bot ID on line 31:

https://pastebin.com/cbY0iZXj

 

You can find your Bot ID by following these instructions: Add a chatbot to mobile and web apps - Power Virtual Agents | Microsoft Docs

@jbmsft Thank you for the quick reply! I had been researching the topic for the past week and a half and could not find the answer anywhere. It is working perfectly now!

Helpful resources

Announcements
Microsoft 365 Conference – December 6-8, 2022

Microsoft 365 Conference – December 6-8, 2022

Join us in Las Vegas to experience community, incredible learning opportunities, and connections that will help grow skills, know-how, and more.

Users online (1,644)