设置Metaframe并将其添加到您的Web应用中
在发布商帐户中设置Metaframe
要进行基本的Metaframe设置：
- 在发布商帐户中打开您的项目，前往玩家 > 元框架部分。
- 单击创建Metaframe。
注意
只有在签署许可协议后，创建Metaframe按钮才可用。
- 单击启用Metaframe开关。
- 在登录管理器项目字段中，选择您在上一步中设置的登录管理器项目。
有关设置高级Metaframe功能的详细信息，请参阅：
将Metaframe集成到Web应用
要将Metaframe添加到您的应用中：
- 在发布商帐户中打开您的项目，前往玩家 > 元框架部分。
- 单击复制脚本代码。
- 通过以下方式之一将脚本添加到您的代码中：
- 在应用程序初始化之前，将脚本插入HTML文件的head或body中，如下例所示。
Copy
- html
1<!doctype html>
2<html lang="en">
3
4<head>
5 <meta charset="UTF-8" />
6 <title>Integration example</title>
7</head>
8
9<body>
10 <script src="https://cdn.xsolla.net/metaframe-web-wallet-widget-prod/container/v1/metaframe.js"></script>
11 <script>
12
13 window.metaframe.create({
14
15 loginProjectId: '00000000-0000-0000-0000-000000000000',
16 merchantId: 000001,
17 projectId: 000001,
18 orbsApiHostId: '00000000-0000-0000-0000-000000000000',
19 isMobile: false,
20 isCollapsed: false,
21 layoutSettings: {
22 desktop: {
23 widgetMarginTop: 16
24 },
25 mobile: {
26 widgetMarginTop: 72
27 },
28 },
29
30 });
31
32 </script>
33 <script src="YOUR_APPLICATION_HERE.js"></script>
34</body>
35
36</html>
- 在应用程序的JS代码中创建一个脚本元素，并在加载脚本后调用
window.metaframe.create方法，如下例所示。这样可以动态加载Metaframe脚本。
- 在应用程序的JS代码中创建一个脚本元素，并在加载脚本后调用
Copy
- javascript
1const metaframeScript = document.createElement("script");
2
3metaframeScript.src = "https://cdn.xsolla.net/metaframe-web-wallet-widget-prod/container/v1/metaframe.js";
4
5metaframeScript.onload = () => {
6
7 window.metaframe.create(
8
9 {
10 loginProjectId: '00000000-0000-0000-0000-000000000000',
11 merchantId: 000001,
12 projectId: 000001,
13 orbsApiHostId: '00000000-0000-0000-0000-000000000000',
14 isMobile: false,
15 isCollapsed: false,
16 layoutSettings: {
17 desktop: {
18 widgetMarginTop: 16
19 },
20 mobile: {
21 widgetMarginTop: 72
22 },
23 },
24 }
25
26 );
27
28};
29
30document.body.appendChild(metaframeScript);
注：
关于
window.metaframe.create 方法参数的详细描述，请参阅了解元框架方法和事件部分。本文对您的有帮助吗？
感谢您的反馈！
我们会查看您的留言并运用它改进用户体验。发现了错别字或其他内容错误？ 请选择文本，然后按Ctrl+Enter。
