geea-develop · July 31, 2018 07:53
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
 </head>
 <body>
    <script type="text/css" id="iframe-stylesheet">
        #conversation {
            margin-bottom: -10px;
        }

        .close-handle {
            padding: 10px;
        }

        .messages {
            margin-bottom: 10px;
        }

        #header {
            text-align: left;
            height: 78px;
            padding: 10px;
            margin: -10px;
            line-height: 25%;
            font-size: 12px;
            font-weight: 300;
        }

        .app-icon {
          position: absolute;
          top: 20px;
          left: 20px;
          height: 48px;
        }

        .text-header-container {
            position: absolute;
            top: 10px;
            left: 78px;
        }

        .app-name-text {
          padding-top: 10px;
          font-size: 14px !important;
          font-weight: 400 !important;
        }
    </script>

    <script>
    !function(e,n,t,r){
        function o(){try{var e;if((e="string"==typeof this.response?JSON.parse(this.response):this.response).url){
        var t=n.getElementsByTagName("script")[0],r=n.createElement("script");r.async=!0,r.src=e.url,t.parentNode.insertBefore(r,t)}}catch(e){}}
        var s,p,a,i=[],c=[];e[t]={init:function(){s=arguments;var e={then:function(n){return c.push({type:"t",next:n}),e},catch:function(n){
        return c.push({type:"c",next:n}),e}};return e},on:function(){i.push(arguments)},render:function(){p=arguments},destroy:function(){a=arguments}},
        e.__onWebMessengerHostReady__=function(n){if(delete e.__onWebMessengerHostReady__,e[t]=n,s)for(var r=n.init.apply(n,s),o=0;o<c.length;o++){
        var u=c[o];r="t"===u.type?r.then(u.next):r.catch(u.next)}p&&n.render.apply(n,p),a&&n.destroy.apply(n,a);for(o=0;o<i.length;o++)n.on.apply(n,i[o])};
        var u=new XMLHttpRequest;u.addEventListener("load",o),u.open("GET","https://"+r+".webloader.smooch.io/",!0),u.responseType="json",u.send()
    }(window,document,"Smooch","<APP_ID>")

    var css = document.querySelector('#iframe-stylesheet').innerText;
    var style = document.createElement('style');
    style.appendChild(document.createTextNode(css));
    style.type = 'text/css';
        Smooch.init({ appId: '<APP_ID>' backgroundImageUrl: '<YOUR_BACKGROUND_IMAGE>' })
            .then(function() {
                iframe = document.querySelector('iframe');
                iframe.contentDocument.head.appendChild(style);
                var headerElement = iframe.contentDocument.querySelector('#header');
                var appIconElement = iframe.contentDocument.querySelector('.app-icon');
                var conversationElement = iframe.contentDocument.querySelector('#conversation');
                var introText = iframe.contentDocument.querySelector('.intro-text').innerText;
                var appName = iframe.contentDocument.querySelector('.app-name').innerText;
                var closeHandleElement = iframe.contentDocument.querySelector('.close-handle');
                var headercontent = appIconElement.outerHTML + 
                    '<div class="text-header-container"><p class="app-name-text">' +
                    appName +
                    '</p><p>' +
                    introText +
                    '</p></div>';

                iframe.contentDocument.querySelector('.messages').style.paddingBottom = '10px';
                iframe.contentDocument.querySelector('.intro-section').remove();
                headerElement.innerText = '';
                headerElement.insertAdjacentHTML('beforeend', headercontent);
                headerElement.appendChild(closeHandleElement);
            });
    </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	</head>
	<body>
	<script type="text/css" id="iframe-stylesheet">
	#conversation {
	margin-bottom: -10px;
	}

	.close-handle {
	padding: 10px;
	}

	.messages {
	margin-bottom: 10px;
	}

	#header {
	text-align: left;
	height: 78px;
	padding: 10px;
	margin: -10px;
	line-height: 25%;
	font-size: 12px;
	font-weight: 300;
	}

	.app-icon {
	position: absolute;
	top: 20px;
	left: 20px;
	height: 48px;
	}

	.text-header-container {
	position: absolute;
	top: 10px;
	left: 78px;
	}

	.app-name-text {
	padding-top: 10px;
	font-size: 14px !important;
	font-weight: 400 !important;
	}
	</script>

	<script>
	!function(e,n,t,r){
	function o(){try{var e;if((e="string"==typeof this.response?JSON.parse(this.response):this.response).url){
	var t=n.getElementsByTagName("script")[0],r=n.createElement("script");r.async=!0,r.src=e.url,t.parentNode.insertBefore(r,t)}}catch(e){}}
	var s,p,a,i=[],c=[];e[t]={init:function(){s=arguments;var e={then:function(n){return c.push({type:"t",next:n}),e},catch:function(n){
	return c.push({type:"c",next:n}),e}};return e},on:function(){i.push(arguments)},render:function(){p=arguments},destroy:function(){a=arguments}},
	e.__onWebMessengerHostReady__=function(n){if(delete e.__onWebMessengerHostReady__,e[t]=n,s)for(var r=n.init.apply(n,s),o=0;o<c.length;o++){
	var u=c[o];r="t"===u.type?r.then(u.next):r.catch(u.next)}p&&n.render.apply(n,p),a&&n.destroy.apply(n,a);for(o=0;o<i.length;o++)n.on.apply(n,i[o])};
	var u=new XMLHttpRequest;u.addEventListener("load",o),u.open("GET","https://"+r+".webloader.smooch.io/",!0),u.responseType="json",u.send()
	}(window,document,"Smooch","<APP_ID>")

	var css = document.querySelector('#iframe-stylesheet').innerText;
	var style = document.createElement('style');
	style.appendChild(document.createTextNode(css));
	style.type = 'text/css';
	Smooch.init({ appId: '<APP_ID>' backgroundImageUrl: '<YOUR_BACKGROUND_IMAGE>' })
	.then(function() {
	iframe = document.querySelector('iframe');
	iframe.contentDocument.head.appendChild(style);
	var headerElement = iframe.contentDocument.querySelector('#header');
	var appIconElement = iframe.contentDocument.querySelector('.app-icon');
	var conversationElement = iframe.contentDocument.querySelector('#conversation');
	var introText = iframe.contentDocument.querySelector('.intro-text').innerText;
	var appName = iframe.contentDocument.querySelector('.app-name').innerText;
	var closeHandleElement = iframe.contentDocument.querySelector('.close-handle');
	var headercontent = appIconElement.outerHTML +
	'<div class="text-header-container"><p class="app-name-text">' +
	appName +
	'</p><p>' +
	introText +
	'</p></div>';

	iframe.contentDocument.querySelector('.messages').style.paddingBottom = '10px';
	iframe.contentDocument.querySelector('.intro-section').remove();
	headerElement.innerText = '';
	headerElement.insertAdjacentHTML('beforeend', headercontent);
	headerElement.appendChild(closeHandleElement);
	});
	</script>
	</body>
	</html>