Chatbot Display Error

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>

@Kris @ayush please help!!

instead of var jwt = “{eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJkZW1vdXNlciIsIm5hbWUiOiJEZW1vIFVzZXIiLCJleHAiOjI1MTYyMzkwMjIsImlzcyI6IiMjIyMgWU9VUiBDTElFTlQgSUQgIyMjIyIsImRpciI6ImRlbW8tZGlyIiwiZW1haWwiOiJkZW1vQHVzZXIuY29tIiwidXNlcm5hbWUiOiJkZW1vIn0.BZFMbHQsinFfs-wva0Y_BoxNASFTejl0eROYxei3No0}”;

try writing var jwt = "
“eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJkZW1vdXNlciIsIm5hbWUiOiJEZW1vIFVzZXIiLCJleHAiOjI1MTYyMzkwMjIsImlzcyI6IiMjIyMgWU9VUiBDTElFTlQgSUQgIyMjIyIsImRpciI6ImRlbW8tZGlyIiwiZW1haWwiOiJkZW1vQHVzZXIuY29tIiwidXNlcm5hbWUiOiJkZW1vIn0.BZFMbHQsinFfs-wva0Y_BoxNASFTejl0eROYxei3No0”;

or if possible you can also show error you are getting for more help.

1 Like

I tried removing the Brackets but still the same output.
There’s no error as such. Instead of the Chatbox, I’m getting the red division on clicking on the button.
Is there something wrong with my integration?

@Kris @ayush Please help.

1 Like

Hi @kjayant1603 ,
Please check if weavy.min.js is loaded properly, its pointed to a local host url make sure its present. I would suggest you to save weavy.min.js in file and then try to load and test.

2 Likes

Get in touch with our technical team by joining our developer community.





Developer Community

Post your questions on the Community and get help from Weavy Developer Support