Skip to main content

Notifications

Announcements

No record found.

Publish & Channel Management
Unanswered

[Announcement] Make your Power Virtual Agents bot start the conversation using a custom canvas

Posted on by

Make your Power Virtual Agents bot start the conversation using a custom canvas blog: https://powervirtualagents.microsoft.com/en-us/blog/make-your-power-virtual-agents-bot-start-the-conversation-using-a-custom-canvas/

 

StartConversation.jpg

 

 

 

Categories:
  • Hathan Profile Picture
    Hathan on at
    Re: [Announcement] Make your Power Virtual Agents bot start the conversation using a custom canvas

    Hey anonymous did you deployed your power virtual agent chatbot in SharePoint site ?as a extension or Webpart.if you know how to show me the way.

  • Re: [Announcement] Make your Power Virtual Agents bot start the conversation using a custom canvas

    @Diganta 

    I did but the error persists. 
    In the sample HTML page it works: file://cyg7006/users$/8233/Documents/chatbot/index.html

    I cannot link our deployed page because it's out intranet on SharePoint, but in the demo website you can see that the message is not coming up https://powerva.microsoft.com/canvas?cci_bot_id=de070903-2993-49e5-8028-1e5952c31484&cci_tenant_id=efcee2d4-3368-4184-b922-c6a0d16d0986

     

    Could I be doing something else wrong?

    I used the code from docs.microsoft.com and only changed the name, colours and bot name

    <!DOCTYPE html>
    <html>
    <head>
    <title>Contoso Sample Web Chat</title>
    <style>
    html, body {
    height: 100%;
    }
    body {
    margin: 0;
    }
    h1 {
    font-size: 16px;
    font-family: Segoe UI;
    line-height: 20px;
    color: whitesmoke;
    display: table-cell;
    padding: 13px 0px 0px 20px;
    }
    .heading {
    background-color: blue;
    height: 50px;
    }
    .main {
    margin: 18px;
    border-radius: 4px;
    }

    div[role="form"]{
    background-color: black;
    }
    #webchat {
    position: fixed;
    height: calc(100% - 50px);
    width: 100%;
    top: 50px;
    overflow: hidden;
    }
    </style>
    </head>
    <body>
    <div>
    <div class="heading">


    <h1>Here2Help</h1>

    </div>
    <div id="webchat" role="main"></div>
    </div>
    <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
    <script>
    const styleOptions = {
    // Add styleOptions to customize web chat canvas
    hideUploadButton: true
    };


    var BOT_ID = "de070903-2993-49e5-8028-1e5952c31484";

    var theURL = "https://powerva.microsoft.com/api/botmanagement/v1/directline/directlinetoken?botId=" + BOT_ID;

    const store = window.WebChat.createStore(
    {},
    ({ dispatch }) => next => action => {
    if (action.type === "DIRECT_LINE/CONNECT_FULFILLED") {
    dispatch({
    meta: {
    method: "keyboard",
    },
    payload: {
    activity: {
    channelData: {
    postBack: true,
    },
    //Web Chat will show the 'Greeting' System Topic message which has a trigger-phrase 'hello'
    name: 'startConversation',
    type: "event"
    },
    },
    type: "DIRECT_LINE/POST_ACTIVITY",
    });
    }
    return next(action);
    }
    );
    fetch(theURL)
    .then(response => response.json())
    .then(conversationInfo => {
    window.WebChat.renderWebChat(
    {
    directLine: window.WebChat.createDirectLine({
    token: conversationInfo.token,
    }),
    store: store,
    styleOptions: styleOptions
    },
    document.getElementById('webchat')
    );
    })
    .catch(err => console.error("An error occurred: " + err));
    </script>
    </body>
    </html>

  • Diganta Profile Picture
    Diganta on at
    Re: [Announcement] Make your Power Virtual Agents bot start the conversation using a custom canvas

    @Anonymous - You need to deploy your custom canvas code to start the conversation automatically.

  • Diganta Profile Picture
    Diganta on at
    Re: [Announcement] Make your Power Virtual Agents bot start the conversation using a custom canvas

    @Anonymous - Can you try the code from the doc with your Bot ID here w3schools.com HTML try it editor?

  • Diganta Profile Picture
    Diganta on at
    Re: [Announcement] Make your Power Virtual Agents bot start the conversation using a custom canvas

    @MaryT0905 - Please remove the "<>" from the value of the BOT_ID variable.

  • Re: [Announcement] Make your Power Virtual Agents bot start the conversation using a custom canvas

    @Diganta 
    I followed the steps on: https://docs.microsoft.com/en-us/power-virtual-agents/configure-bot-greeting and I can open a html page and the bot works, but not on webpage where I deployed my bot. How can I make it work there?

    Thank you for your time.

    Isabela Ardions

  • Re: [Announcement] Make your Power Virtual Agents bot start the conversation using a custom canvas

    Hello Sir,

     

    Bot isn't initiating the conversation, I followed all customization steps mentioned in https://docs.microsoft.com/en-us/power-virtual-agents/customize-default-canvas. What I am missing out can you suggest plz ? 

  • MaryT0905 Profile Picture
    MaryT0905 on at
    Re: [Announcement] Make your Power Virtual Agents bot start the conversation using a custom canvas

    I get the following error when I open the code in edge, and the website provided in the article.  My bot is published. Here is my file as well

     
     
     
     
     

    htmlerror.jpgpva error.jpg

  • dougmaloney Profile Picture
    dougmaloney on at
    Re: [Announcement] Make your Power Virtual Agents bot start the conversation using a custom canvas

    @Diganta thanks. let me know if you need any other info.

  • dougmaloney Profile Picture
    dougmaloney on at
    Re: [Announcement] Make your Power Virtual Agents bot start the conversation using a custom canvas

    @Diganta great - thanks

     

    https://powerva.microsoft.com/api/botmanagement/v1/directline/directlinetoken?botId=3716d814-10e6-489c-8cb3-2ea2d5be14a5

     

    Or you can see the live chatbot at https://mlc.org.au

    It uses a custom canvas but the performance inspector tells me this is not causing the problem.

Helpful resources

Quick Links

Exciting News for Copilot Studio Communi…

Get ready to experience a whole new level of engagement with the Copilot Studio…

Celebrating the May Super User of the…

LaurensM is an exceptional contributor to the Power Platform Community…

Check out the Copilot Studio Cookbook…

We are excited to announce our new Copilot Cookbook Gallery in the Community…

Featured topics