Search code examples
node.jsbotframeworkbotsmicrosoft-teamsadaptive-cards

how to open url in other browser using adaptive card in microsoft teams bot?


I am using microsoft teams bot framework and I want a adaptive card with a button to open url in popout(other browser) By using (Actions.openUrl) it Opens a URL in the default browser. and want it to open in other browser

This is what i have tried and I am using node.js

var card = {
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "type": "AdaptiveCard",
    "version": "1.0",
    "body": [{
        "type": "Container",
        "items": [{
            "type": "TextBlock",
            "text": `${session.message.text}`,
            "weight": "bolder",
            "size": "medium"
        }

        ]
    },
    {
        "type": "Image",
        "url": `${bodyData.img}`

    },

    {
        "type": "Container",
        "items": [{
            "type": "TextBlock",
            "text": `${bodyData.calendar}`,
            "wrap": true
        }]
    }
    ],
    "actions": [
        {
            "type": "Action.openUrl",
            "title": "Open in Popout",
            "url": `${bodyData.url}`
        }   
        ]};

Solution

  • Like paul cheung said, you cannot specify the browser in an openUrl button. Not only that, you cannot specify the URL's "target" in an openUrl button. You can see here that the only thing you can specify is the URL itself. The details of how the URL gets opened are the responsibility of the client and the bot has no control over them.

    I think you have a few options.

    Option 1

    If you really want to open a browser window like a popup, you can try creating a sort of redirect page that the card would link to. When the user clicks the button, your redirect page would open in a new tab of the current browser window and then whatever client-side code you've set up would open the target page in a new window and close the redirect page's tab.

    Option 2

    The conventional way to do what you're talking about in Teams is to use a task module. Depending on what your URL contains, you might even consider putting a card in your task module instead of a web page.