I’m getting the following attached error while adding the chatbox on the website. Instead of the Message Pop-up, I’m getting just a red section.
Below is my code followed by the Error Screenshot.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://localhost:44323/javascript/weavy.min.js"></script>
<script>
var weavy = new Weavy();
</script>
<script>
$(function() {
var weavy = new Weavy();
var space = weavy.space({
key: "global"
});
var messenger = space.app({
key: "Mymessenger",
type: "messenger",
container: "#messaging",
open: false
});
$(document).on("click", ".toggle-messenger", function() {
messenger.toggle();
$("#messaging").toggleClass("open");
});
});
</script>
<script>
var jwt = "{eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJkZW1vdXNlciIsIm5hbWUiOiJEZW1vIFVzZXIiLCJleHAiOjI1MTYyMzkwMjIsImlzcyI6IiMjIyMgWU9VUiBDTElFTlQgSUQgIyMjIyIsImRpciI6ImRlbW8tZGlyIiwiZW1haWwiOiJkZW1vQHVzZXIuY29tIiwidXNlcm5hbWUiOiJkZW1vIn0.BZFMbHQsinFfs-wva0Y_BoxNASFTejl0eROYxei3No0}";
var weavy = new Weavy({
jwt: jwt
});
var space = weavy.space({
key: "demo"
});
space.app({
key: "posts-demo",
type: "posts",
container: "#weavy-feeds"
});
</script>
<script>
var global = weavy.space({
key: "ecc90e4a-36b5-481c-a75f-661b6e233828"
});
global.app({
key: "messenger",
type: "messenger",
container: "#messenger"
});
</script>
</head>
<style>
#messaging {
position: fixed;
top: 0;
bottom: 0;
z-index: 1000;
background-color: red;
transition: transform, opacity;
transition-duration: 0.2s;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
right: 0;
width: 20rem;
transform: translateX(20rem);
pointer-events: none;
height: 100%;
}
#messaging.open {
transform: none;
border-left: 1px solid #ccc;
}
</style>
<body>
Hello World!
<div id="messaging"></div>
<button class="toggle-messenger">Toggle Messenger</button>
<div id="weavy-feeds"></div>
</body>
</html>
