smartbanner.js实现可定制智能应用横幅使用示例

<!-- Start SmartBanner configuration -->
<meta name="smartbanner:title" content="Smart Application">
<meta name="smartbanner:author" content="SmartBanner Contributors">
<meta name="smartbanner:price" content="FREE">
<meta name="smartbanner:price-suffix-apple" content=" - On the App Store">
<meta name="smartbanner:price-suffix-Google" content=" - In Google Play">
<meta name="smartbanner:icon-apple" content="/file/imgs/upload/202303/02/ydesdcvtnpm.jpg">
<meta name="smartbanner:icon-google" content="/file/imgs/upload/202303/02/fgo4hq0bgwv.jpg">
<meta name="smartbanner:button" content="VIEW">
<meta name="smartbanner:button-url-apple" content="https://ios/application-url">
<meta name="smartbanner:button-url-google" content="Https://android/application-url">
<meta name="smartbanner:enabled-platfORMs" content="android,ios">
<meta name="smartbanner:close-label" content="Close">
<!-- End SmartBanner configuration -->

<link rel="stylesheet" href="node_modules/smartbanner.js/dist/smartbanner.min.css" rel="external nofollow" >
<script src="node_modules/smartbanner.js/dist/smartbanner.min.js"></script>

if (navigator.language?.includes("zh")) {
    document
     .querySelector('meta[name="smartbanner:button"]')
     .setAttribute("content", "查看");
}

 <!-- <meta name="smartbanner:button-url-apple" content="https://ios/application-url">
 <meta name="smartbanner:button-url-google" content="https://android/application-url"> -->

document.addEventListener("smartbanner.view", () => {
  document.querySelector(".js_smartbanner__button").onclick = () => false;
});
document.addEventListener("smartbanner.clickout", () => {
  // 在这里做其它操作，比如手动关闭横幅
  smartbanner.exit();
});

<meta name="smartbanner:api" content="true">

const apiHandler = () => {
  if (is_weixn()) return;
  setTimeout(() => {
    if (smartbanner) smartbanner.publish();
  }, 500);
};
window.onload = apiHandler;