0

I was wondering if possible to add external javascript or css inside an iframe, I have an iframe on our website generated from 3rd party application zendesk chat and I need to change the icon and text inside of it. 

<iframe id="webWidget" tabindex="0">
    <html>
        <head></head>
        <body>
            <div id="Embed">
                <div class="src-component-Launcher-wrapper u-isActionable u-textLeft u-inlineBlock u-borderNone u-textBold u-textNoWrap Arrange Arrange--middle u-userLauncherColor ">

                    <!-- This is the icon -->
                    <span class="src-component-Icon-container src-component-Launcher-icon src-styles-components-Icon-Icon Arrange-sizeFit u-textInheritColor u-inlineBlock  Icon" type="Icon">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
                            <path d="M11,12.3V13c0,0-1.8,0-2,0v-0.6c0-0.6,0.1-1.4,0.8-2.1c0.7-0.7,1.6-1.2,1.6-2.1c0-0.9-0.7-1.4-1.4-1.4 c-1.3,0-1.4,1.4-1.5,1.7H6.6C6.6,7.1,7.2,5,10,5c2.4,0,3.4,1.6,3.4,3C13.4,10.4,11,10.8,11,12.3z"></path><circle cx="10" cy="15" r="1"></circle><path d="M10,2c4.4,0,8,3.6,8,8s-3.6,8-8,8s-8-3.6-8-8S5.6,2,10,2 M10,0C4.5,0,0,4.5,0,10s4.5,10,10,10s10-4.5,10-10S15.5,0,10,0 L10,0z"></path>
                        </svg>
                    </span>

                    <!-- This is the text -->
                    <span class="src-component-Launcher-label Arrange-sizeFit u-textInheritColor u-inlineBlock ">
                        Support
                    </span>

                </div>
            </div>
        </body>
    </html>
</iframe>

I successfully change the text from "Support" to "Contact Sales" by this code

$(document).ready(function(){
  zE(function(){
    $zopim(function(){
        $("#launcher").css('width', 'auto');
        $("#launcher").contents().find("span.src-component-Launcher-label").text('Contact Sales');
    });
  });
});

But the problem now is the icon is svg 

<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
    <path d="M11,12.3V13c0,0-1.8,0-2,0v-0.6c0-0.6,0.1-1.4,0.8-2.1c0.7-0.7,1.6-1.2,1.6-2.1c0-0.9-0.7-1.4-1.4-1.4 c-1.3,0-1.4,1.4-1.5,1.7H6.6C6.6,7.1,7.2,5,10,5c2.4,0,3.4,1.6,3.4,3C13.4,10.4,11,10.8,11,12.3z"></path><circle cx="10" cy="15" r="1"></circle><path d="M10,2c4.4,0,8,3.6,8,8s-3.6,8-8,8s-8-3.6-8-8S5.6,2,10,2 M10,0C4.5,0,0,4.5,0,10s4.5,10,10,10s10-4.5,10-10S15.5,0,10,0 L10,0z"></path>
</svg>

Is there's a way to change it using jQuery or javascript? Is there's a way to add bootstrap/font-awsome inside of this iframe and replace svg to something like that?

PS: I am aware that I can inject css and js to an iframe, however, the problem is zendesk has security stuff that not allowing to do it.

Thanks!

Aljay
  • 456
  • 7
  • 21

0 Answers0