CODEWITHSUNDEEP
javascripthtmlbotframeworkdirect-line-botframework
Teragon
Teragon

Reputation: 249

Creating website using DirectLineJS

I'm trying to set up the DirectLineJS to work in a website just for testing purposes right now. I've built the DirectLineJS repo and added /built/directLine.js to my website folder following the documentation here https://github.com/Microsoft/BotFramework-DirectLineJS

In the HTML page I'm just using a button to try to send a message through the direct line 

<html>

<head>
    <meta charset="UTF-8" />
    <title>Bot Chat</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="http://unpkg.com/botframework-directlinejs/directLine.js" type="javascript"></script>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <style>
        .wc-chatview-panel {
            width: 320px;
            height: 500px;
            position: relative;
        }

        .h2 {
            font-family: Segoe UI;
        }
    </style>
</head>

<body>

    <h2 style="font-family:Segoe UI;">Welcome to my custom Bot!</h2>
    <section class="container"> 

        <input id="clickMe" type="button" value="clickme" onclick="connectDirectLine();" />

    </section>

    <textarea id="myTextarea">
342 Alvin Road
Ducksburg</textarea>

    <p>Click the button to change the contents of the text area.</p>

    <button type="button" onclick="myFunction()">Try it</button>

    <script>
        function myFunction() {
            var text = document.getElementById("myTextarea").value;
            console.log(text)
        }
    </script></body>

</html>

<script>        
        function connectDirectLine() {

            import { DirectLine } from 'botframework-directlinejs';
            var directLine = new DirectLine({
                secret: "mySecret",
            });

            directLine.postActivity({
                from: { id: 'myUserId', name: 'myUserName' }, // required (from.name is optional)
                type: 'message',
                text: 'a message for you, Rudy'
            }).subscribe(
                id => console.log("Posted activity, assigned ID ", id),
                error => console.log("Error posting activity", error)
                );

            directLine.activity$
                .filter(activity => activity.type === 'message' && activity.from.id === 'yourBotHandle')
                .subscribe(
                message => console.log("received message ", message)
                );
        }
</script>
<html

When I run the website the error I'm getting is unexpected token import from import { DirectLine } from "botframework-directlinejs";

how can I properly import the botframework-directlinejs file so that I can use the DirectLine object?

Upvotes: 0

Views: 758

Answers (1)

Ezequiel Jadib
Ezequiel Jadib

Reputation: 14787

You are mixing TypeScript with JavaScript.

To use Direct Line add the following to the HTML of your page:

<script src="http://unpkg.com/botframework-directlinejs/directLine.js"/>

Then you should delete your Import statement and finally, update the code that creates the DirectLine object to be:

 var directLine = new DirectLine.DirectLine({
     secret: "mySecret",
 });

Notice the DirectLine.DirectLine

Upvotes: 2

Related Questions