Skip to content

Instantly share code, notes, and snippets.

@molbal
Created July 23, 2019 16:04
Show Gist options
  • Save molbal/4397765979cccf8339f2c809851a36ff to your computer and use it in GitHub Desktop.
Save molbal/4397765979cccf8339f2c809851a36ff to your computer and use it in GitHub Desktop.
Example frotnend integration
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>BotMan Studio</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Barlow+Semi+Condensed:400,700&display=swap&subset=latin-ext" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/molbal/[email protected]/build/assets/css/widget.min.css">
<!-- Styles -->
<style>
body {
font-family: "Barlow Semi Condensed", sans-serif;
margin: 0;
padding: 0;
background: radial-gradient(#38aefa, #349be2);
}
.container {
display: flex;
height: 100vh;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div class="container">&nbsp;</div>
<script>
var botmanWidget = {
chatServer: 'https://php-uk-conference-2018.marcelpociot.de/botman',
frameEndpoint: '/chat-endpoint',
bubbleAvatarUrl: "https://img.icons8.com/color/96/000000/technical-support.png",
title: 'Chatbot',
/* Below Sunday development */
headerTextColor: '#fff',
headerTextFontFamily: "Barlow Semi Condensed",
headerTextFontWeight: 700,
mainColor: '#f37820',
headerIconBorderRadius: '0',
headerIconDisplayed: true,
headerIconSize: '80px'
}
</script>
<script src="https://cdn.jsdelivr.net/gh/molbal/[email protected]/build/js/widget.js" integrity="sha256-myGUOuEeTzqiz4ltlVns6LXOWUcFq1Rr+Ie9641fQYI=" crossorigin="anonymous"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment