Skip to content

Instantly share code, notes, and snippets.

@spasiu

spasiu/index.html

Last active July 31, 2018 07:53
Show Gist options
  • Save spasiu/8e6f2fb6e94085b97560dc9aa099fff0 to your computer and use it in GitHub Desktop.
Save spasiu/8e6f2fb6e94085b97560dc9aa099fff0 to your computer and use it in GitHub Desktop.
Download ZIP
Modify the Smooch Web SDK by manipulating iframe DOM
Raw
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>
@spasiu
Copy link
Author

spasiu commented Feb 23, 2018

This example shows how to hack intro content into the header of the Web Messenger.

Make sure to replace all instances of <YOUR_BACKGROUND_IMAGE> and <APP_ID> with the appropriate values.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment