Olvy React Embed

olive-embed.js

componentDidMount() {

        if(typeof window!=='undefined'){

          /**  use this to remove the button if needed
          var oldBtn = document.getElementById('ovly-trigger')
            if(oldBtn){
                oldBtn.remove()
            }
          **/
            //create the button
            const btn = document.createElement('div')
            btn.innerHTML=`
            <div class="fixed bottom-0 right-0 mr-3 mb-2 z-20">
                <button class="text-xs px-3 py-2 text-royalblue-500 rounded-lg font-semibold" id='olvy-trigger'>What's New?</button>
            </div>`
            //append to body
            document.body.appendChild(btn)

            //create the first script
            const scriptA = document.createElement("script");
            scriptA.innerHTML = `
            var OlvyConfig = {
                organisation: "letter",
                target: "#olvy-trigger",
                type: "sidebar",
                view: {
                  showSearch: false,
                  compact: false,
                  showUnreadIndicator: true,
                  unreadIndicatorColor: "#D864A3FF",
                  unreadIndicatorPosition: "top-right"
                }
              };`;
              //embed it
              document.body.appendChild(scriptA);
              
            //then add main olvy script (settimout probably unnecessary)
            setTimeout(function(){
                const script = document.createElement("script");
                script.src = "https://app.olvy.co/script.js";
                script.async = true;
    
                document.body.appendChild(script);
            },100)
           
        }
}