If you wish to open an external web page from your MiniApp, you can do so by just linking directly to the external URL. The MiniApp SDK will detect that you are linking to an external page, and this URL will then be opened in a new window on top of your MiniApp view. For example:
- HTML link:
<a href="http://www.example.com">Open external page</a>
- JavaScript:
window.location = "http://www.example.com"
- Note: usage of JavaScript's
window.open
is currently unsupported, so it should not be used. Please usewindow.location
instead if you need to open a URL from JavaScript.
Returning to MiniApp and passing params
If you wish to return to your MiniApp from your external page, you can do so by linking to your MiniApp's URL from your external page:
- Mini App Return URL:
mscheme.MY_MINI_APP_ID://miniapp/index.html
- You can get your MiniApp ID from the RAS Portal.
Note: Your Host App must support this "Return to MiniApp from an external page" feature, so please check with your Host App whether it's supported.
Additionally, you can pass parameters both to the external page and receive parameters back from the external page.
1. In your MiniApp JavaScript: Open an external page
// Open the external page and pass parameters
window.location =
"https://www.example.com?myParameter=testValue"
2. In your external page JavaScript: Return back to your MiniApp
// Receive the parameters from mini app
const params = window.location.search.substr(1).split(
"&"
);
// ... do something with your parameters ...
// Set the HREF for an <a> tag in your HTML
// When this <a> tag link is tapped, your external page will be closed and the user returned to your MiniApp
document.getElementById(
"MyAnchorTag"
).href =
"mscheme.MY_MINI_APP_ID://miniapp/index.html?myReturnParameter=myValue"
;
3. In your MiniApp JavaScript: Receive params from external page
// Receive the parameters
const params = window.location.search.substr(1).split(
"&"
);
// ... do something with your parameters ...
Optional: Passing the MiniApp URL as a parameter
If you don't wish to hard-code your MiniApp URL into your external page, you can instead pass the MiniApp URL as a parameter. For example, you may wish to use your external page with multiple MiniApp IDs.
In your MiniApp:
// Form your callback URL
const callbackUrl = window.location.protocol +
"//"
+ window.location.host +
"/index.html"
;
// Open your external page
window.location =
"https://www.example.com?callbackurl="
+ encodeURIComponent(callbackUrl);
In your external page JavaScript:
// Receive the "callbackUrl" parameter
const params = window.location.search.substr(1).split(
"&"
);
const callbackUrl = params.map(param => param.split(
"="
))
.find(pair => pair[0] ==
"callbackUrl"
)[1];
// Set the HREF on your <a> tag with the decoded callback URL
document.getElementById(
"MyAnchorTag"
).href = decodeURIComponent(callbackUrl);