将Beamer(app.getbeamer.com)集成到Next.js 13

yhuiod9q  于 12个月前  发布在  其他
关注(0)|答案(1)|浏览(117)

我目前正在做一个Next.js 13项目,希望集成Beamer(https://app.getbeamer.com/)来宣布我的Web应用程序的更新和新功能。
我已经从我的Beamer帐户获得了Beamer脚本,但我不确定如何将其集成到我的Next.js 13应用程序中。我尝试将其添加到我的主布局.tsx文件的<head>部分,但语法似乎不受支持。
有没有人在Next.js 13项目中成功实现了Beamer?如果有,你能分享你的方法或提供指导如何正确地将Beamer与最新版本的Next.js集成吗?
任何帮助或指针将不胜感激!
先谢了。
下面是我的实现。
x1c 0d1x的数据

dfddblmv

dfddblmv1#

在Next.js 13中,我通过将此逻辑移动到客户端组件中并通过useEffect添加到DOM中来集成Beamer。将该客户端组件添加到RootLayout文件中。

useEffect(() => {
    // Create a new script element
    const scriptElement = document.createElement("script");
    scriptElement.type = "text/javascript";
    scriptElement.defer = true; // or use scriptElement.setAttribute("defer", "true");

    // Add user information to the script content
    scriptElement.innerHTML = `
      var beamer_config = {
        product_id: '<YOUR_BEAMER_PROD_ID>',
        button_position: 'bottom-right',
      };
    `;

    // Append the script element to the document
    document.head.appendChild(scriptElement);

    // Create another script element for the Beamer embed script
    const beamerScriptElement = document.createElement("script");
    beamerScriptElement.type = "text/javascript";
    beamerScriptElement.src = "https://app.getbeamer.com/js/beamer-embed.js";
    beamerScriptElement.defer = true; 

    
    document.head.appendChild(beamerScriptElement);
  }, []);

字符串

相关问题