-
-
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!