Showing posts with label Add html in iFrame. Show all posts
Showing posts with label Add html in iFrame. Show all posts

Friday 26 March 2021

How to add css and html in iFrame using JavaScript

 var container = document.querySelector('iframe#gorgias-chat-container');

    var chatButtonHead = container?.querySelector('#chat-button')?.contentWindow.document.querySelector('head');

    var chatButton = container?.querySelector('#chat-button')?.contentWindow.document.querySelector('body');

    chatButton = chatButton?.querySelector('button');

    

    if (chatButton?.children.length){

        var chatbuttonStyle = document.createElement('div');

        chatbuttonStyle.style.textAlign = "center";

    chatbuttonStyle.style.fontWeight = "500";

        chatbuttonStyle.textContent = 'Chat';

    chatButton.appendChild(chatbuttonStyle);

        window.clearInterval(gorgiasChatbutton);

    }


Example 2 

var gorgiasChatbutton = window.setInterval(function() {

    var container = document.querySelector('#gorgias-chat-container');

    var chatButtonHead = container?.querySelector('#chat-button')?.contentWindow.document.querySelector('head');

    var chatButton = container?.querySelector('#chat-button')?.contentWindow.document.querySelector('body');

    var chatButton = container?.querySelector('#chat-button')?.contentWindow.document.querySelector('body');

    chatButton = chatButton?.querySelector('button');

    chatButton = chatButton?.querySelector('.messenger-button-iframe-uscp54');

    chatButton = chatButton?.querySelector('.messenger-button-iframe-clht14');

    

    if (chatButton?.children.length){

        var buttonStyle = document.createElement('style');

    buttonStyle.textContent = '.chattext{color: #0e2fb5;text-align: center;font-weight: 500;position: absolute;bottom: 6px;left: 2px;font-size: 12px;background: #FFF;border-radius: 100%;}'; // the custom CSS for the chat button

    

    chatButtonHead.appendChild(buttonStyle);

        

        var chatbuttonStyle = document.createElement('div');

    chatbuttonStyle.classList.add("chattext")

        chatbuttonStyle.textContent = 'Chat';

    chatButton.appendChild(chatbuttonStyle);

    window.clearInterval(gorgiasChatbutton);

    }

}, 100);