Bot framework get the ServiceUrl of embedded chat control page

Question

I want to embed the chat control to many websites and I want to get the Url of the website that I've embedded in order to my bot can get the Data matching with the Website URL. However, when I embed the iframe generated from WebChat, I always get the same ServiceUrl and that's https://webchat.botframework.com/, it isn't the Url of the website, so how can I embed the chat control to any website and my bot can get the website Url not the Url of the WebChat or DirectLine.

Here's what I've tried:Direct-Line chat control

Here's the result I've tested with my published bot:

I've noticed that, when I've tested my bot with the Bot Framework Emulator, it always return the exact Url of the sender (in case of local testingm, it will return http://localhost:XXXX/). So how can we do like this?

Answer 1

I think a way to achieve this would be by using BackChannel, which adds the ability for a bot to communicate with a page that embeds the bot through WebChat. It will a allow you to:

• Send events to a page that hosts an instance of a WebChat
• Listen for events from the page that hosts an instance of a WebChat

The first piece is, of course, the HTML page, which will contain what you put together, plus the logic to send/listen to events. The sample page with the basic logic can be found here and below is the image with the events related code.

Now, you need to prepare your bot to listen and send events. There is a sample in Node.js, that shows how to do that.

Porting that in C#, is as easy as listen and sending to activities of type Event. A sample code for that (using the events of the HTML page mentioned before):

public async Task<HttpResponseMessage> Post([FromBody]Activity activity)
{
    if (activity.Type == ActivityTypes.Event &&
        string.Equals(activity.Name, "buttonClicked", StringComparison.InvariantCultureIgnoreCase))
    {
        ConnectorClient connector = new ConnectorClient(new Uri(activity.ServiceUrl));

        // return our reply to the user
        Activity reply = activity.CreateReply("I see that you just pushed that button");
        await connector.Conversations.ReplyToActivityAsync(reply);
    }

    if (activity.Type == ActivityTypes.Message)
    {
        ConnectorClient connector = new ConnectorClient(new Uri(activity.ServiceUrl));

        // return our reply to the user
        var reply = activity.CreateReply();
        reply.Type = ActivityTypes.Event;
        reply.Name = "changeBackground";
        reply.Value = activity.Text;
        await connector.Conversations.ReplyToActivityAsync(reply);
    }
    else
    {
        HandleSystemMessage(activity);
    }
    var response = Request.CreateResponse(HttpStatusCode.OK);
    return response;
}

Bottom line, in your HTML page you will have to send an event to the bot, with the page URL and the bot will have to listen to that event to get the value