Start Bot using button

[lahddah]

Hello - On the 'Demo' sites, you can click buttons/links that will start the bot. Is there a way to do this when publishing to a SharePoint site? Meaning, would I be able to add a set of buttons / links in one section of the page that will kick the bot off without me having to type 'hi' and then a topic?

Like, clicking on a button that says 'How do I reset my password?', then having the bot start by saying 'I see you want to reset your password....'

Thanks, in advance. ~ lah

[renatoromao · Accepted solution]

Hi @lahddah ,

Yes, but you need a developer skills to do it.

Today, you can implement PVA as Iframe inside SharePoint Online, but if you use variables as global and external, and customize your site, you can use it.

its pretty hard to do it.

[lahddah]

Thank you, renatoromao. That is a bummer. I'm starting to build out a whole power apps portal, but it just seems like overkill. If that might work, however, I'll go with it. I just don't know how others are getting it to start minimized on the screen and have it start with a user click, rather than a user having to say 'hello'. I'll keep researching.

thanks, again.

~ lah

[renatoromao]

Hi @lahddah ,

You're welcome! 🙂

You can build using CSS and JS, it's a customization that Power Virtual Agents allows you.

1- Create a CSS and JS file to use a button, icon, div or something like that inside the page, similar to this page.

COVID19 Volunteer - Self4Society (mygov.in)

Doc: Customize the web chat canvas - Power Virtual Agents | Microsoft Docs

2- After the user clicks on the div, button or something like that, you can start the greeting topic to your bot.

If you have some design or dev knowledge, you can see this site COVID19 Volunteer - Self4Society (mygov.in) using the F12 control in your keyboard and understand the customization behind the page, will help you a lot.

[lahddah]

That is what I am looking for. Thank you! I have seen those instructions, but I am working to put it inside a SharePoint Online intranet page, so the 'index.html' part threw me off. I am not seeing how it would work inside of SP like this. But I will revisit it and see what I can do. Thank you, again, for the examples and explanations. I am proficient in CSS and JS and other programming codes, so hopefully I can make it happen.

[nmk]

Hi,
So you can create a page in any customer portal or static website you have access to, build as per your requirement and once you are happy then you can embed the same in SharePoint via iframe. The example of self4society doesn't use iframe as they have embedded the bot code directly. This is also an option if SharePoint allows embedding of html + js directly on to a page (i am not sure about that).
Our bot is for the customers so we have built a page in powerapps portal and provided an iframe to the other team to host the same in corporate portal. 

[lahddah]

Thank you, nmk. That is what I'm doing now in SharePoint Online (embedded iframe). I am having difficulty getting it to start minimized with a call to action (click here to chat) or some chat image button. It is just open full height and blank until someone types in it. I can get it to autostart in a test 'index' page, but even if I could figure out how to autostart it w/ brief intro and instructions letting the user know how to interact with it, I know each time someone visits the page, it will be recorded as a 'run', so stats might be wonky. (less important)

Onload, I'd like something like a simple call to action button which, when clicked, opens up the chat window with greetings topic. Like this one:

There are html and script web parts available in SharePoint, but so far those aren't working for the code and in SharePoint online. I'll keep trying, though.

Thanks, again!

~ lah

[nmk]

Hi  @lahddah,

Again, you can do multiple things. It's all up to the requirement and creativity you can put into action.

Well, to start the bot on the click on a button, you need to use the custom canvas (I am sure you are already aware of this) -> here's the details.

Secondly, you need to encapsulate the below code into a function and call the function on the button click.

        const styleOptions = {

           // Add styleOptions to customize Web Chat canvas
           hideUploadButton: true
        };

        // Add your BOT ID below 
        var BOT_ID = "<ENTER YOUR 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,
                        }),
                        styleOptions
                    },
                    document.getElementById('webchat')
                );
            })
            .catch(err => console.error("An error occurred: " + err));

Yes it will come as blank. You have two options now.

1- Auto start the chat conversation. This is the route we took. More details here Note: if you don't use a user topic in greeting then it won't be counted as billed session.

2- There are lots of things you can do with the help of HTML+Javascript+CSS combination e.g.

• Containerized the bot into into a div and put a header/footer with instruction.
• Put an overlay with instructions and give some effects. You can google for ideas- here

[lahddah]

Thank you, nmk! These are all methods I am trying. I'm working on a localhost thing now to see if I can make it work the say I want (start minimized & maximize on button press). One problem that I've found is that the script webpards that worked in SharePoint 2013 classic pages don't work with SharePoint online modern pages, which is the direction we want to go. So, I'm trying to fit a square peg into a round hole, I guess. I appreciate your input and am looking into the links shared. I've visited all of them prior to posting here, but will go through them more closely to see what I'm missing.

Thank you -

~ lah

[renatoromao]

Hi @lahddah ,

In SharePoint Modern Pages, you can use SPFx.

I will do a sample in this weekend because I have the most part of this code that I already did for my client. Can you wait for this sample?