-
-
Save dzabrzenski/190f46538698eb88c679d8ebe12a884c to your computer and use it in GitHub Desktop.
<html> | |
<head> | |
<title>Landing bot with BotEngine.ai</title> | |
<meta charset="utf-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1"> | |
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"> | |
<style type="text/css"> | |
* { | |
font-family: 'Open Sans', sans-serif; | |
box-sizing: border-box; | |
padding: 0; | |
margin: 0; | |
} | |
iframe { | |
border: 0; | |
-webkit-box-shadow: 0px 0px 28px -2px rgba(214,214,214,1); | |
-moz-box-shadow: 0px 0px 28px -2px rgba(214,214,214,1); | |
box-shadow: 0px 0px 28px -2px rgba(214,214,214,1); | |
} | |
nav { | |
width: 100%; | |
padding: 20px 20px; | |
background: #e0eaef; | |
margin-bottom: 40px; | |
color: #6d838e; | |
font-weight: 600; | |
letter-spacing: 1px; | |
text-align: center; | |
text-transform: uppercase; | |
} | |
header { | |
width: 1000px; | |
height: 250px; | |
margin: 0 auto; | |
-webkit-border-radius: 10px; | |
-moz-border-radius: 10px; | |
border-radius: 10px; | |
background: #d4e0e6; | |
} | |
section { | |
width: 100%; | |
max-width: 1000px; | |
height: auto; | |
margin: 25px auto; | |
} | |
section > div.left { | |
width: 420px; | |
float: left; | |
} | |
section > div.right { | |
width: calc(100% - 420px); | |
float: left; | |
padding-left: 25px; | |
} | |
section > div.right > div { | |
width: calc(50% - 5px); | |
height: 250px; | |
background: #e8f1f5; | |
font-size: 15px; | |
padding: 50px; | |
float: left; | |
line-height: 30px; | |
color: #697276; | |
-webkit-border-radius: 10px; | |
-moz-border-radius: 10px; | |
border-radius: 10px; | |
margin-bottom: 20px; | |
} | |
section > div.right > div:nth-child(2n) { | |
margin-right: 10px; | |
} | |
section > div.right > div:first-child { | |
width: 100%; | |
margin: 0 0 20px 0; | |
} | |
section > div.right > div > p { | |
width: 90%; | |
-webkit-border-radius: 6px; | |
-moz-border-radius: 6px; | |
border-radius: 6px; | |
background: #d4e0e6; | |
padding: 5px; | |
margin-bottom: 15px; | |
} | |
section > div.right > div > p:first-child { | |
width: 40%; | |
background: #c2d0d7; | |
padding: 7px; | |
margin-bottom: 25px; | |
} | |
section > div.right > div > p:nth-child(2n) { | |
width: 80%; | |
} | |
@media only screen and (max-width: 1024px) { | |
header, section { | |
width: 90%; | |
} | |
section > div.right > div { | |
width: 100%; | |
margin: 0 0 20px; | |
} | |
} | |
@media only screen and (max-width: 768px) { | |
section > div.left, | |
section > div.right { | |
width: 100%; | |
padding: 20px 0; | |
} | |
} | |
</style> | |
</head> | |
<body> | |
<nav>Landing bot with BotEngine.ai</nav> | |
<header></header> | |
<section> | |
<div class="left"> | |
<iframe src="widget.html" width="100%" height="550" border="0"></iframe> | |
</div> | |
<div class="right"> | |
<div> | |
<p></p><p></p><p></p><p></p><p></p><p></p> | |
</div> | |
<div> | |
<p></p><p></p><p></p><p></p><p></p><p></p> | |
</div> | |
<div> | |
<p></p><p></p><p></p><p></p><p></p><p></p> | |
</div> | |
<div> | |
<p></p><p></p><p></p><p></p><p></p><p></p> | |
</div> | |
</div> | |
</section> | |
</body> | |
</html> |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<title>Landing bot with BotEngine.ai</title> | |
</head> | |
<body> | |
<script type="text/javascript"> | |
window.__be = window.__be || {}; | |
window.__be.id = "59cd403b8187680007244146"; // put your chat widget id here | |
var BE_API = window.BE_API || {}; | |
// open chat widget window after load | |
BE_API.onLoad = function () { | |
BE_API.openChatWindow(); | |
}; | |
(function() { | |
var be = document.createElement('script'); be.type = 'text/javascript'; be.async = true; | |
be.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'cdn.botengine.ai/widget/plugin.js'; | |
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(be, s); | |
})(); | |
</script> | |
<style type="text/css"> | |
#botengine-chat { | |
width: 100% !important; | |
} | |
</style> | |
</body> | |
</html> |
V-max-ops
commented
Sep 25, 2021
even after linking the chat widget js code to our site, I can't use a chatbot. it's just not even appearing
hi @dzabrzenski i am trying to implement this build referencing this demo: https://cdn.chatbot.com/demo/landing-bot/index.html
i am getting an error "BE_API.openChatWidget is not a function" - in the plugin.js
wondering if you have a fix for this? thanks!
hi @dzabrzenski i am trying to implement this build referencing this demo: https://cdn.chatbot.com/demo/landing-bot/index.html i am getting an error "BE_API.openChatWidget is not a function" - in the plugin.js wondering if you have a fix for this? thanks!
I found I had to update openChatWidget to openChatWindow in the page widget.html and it worked fine.
@selkirkmac thank you! I've updated the gist file, best wishes!