如何在网站中集成对话框流与浮动聊天

时间:2018-03-08 17:58:51

标签: dialogflow google-assistant-sdk

我想在网站中使用Dialogflow框架。我知道dialogflow提供了网站集成作为小部件但我想在网站中使用一个自定义设计的浮动聊天框。就像一个徘徊在页面一角的聊天框。如何与这样的chatUI集成

7 个答案:

答案 0 :(得分:2)

您可以使用支持DialogFlow(api.ai)集成的Kommunicate实时聊天小部件,并在右下角有一个浮动聊天图标。 https://docs.kommunicate.io/docs/web-installation.html

请参阅有关在网站上集成api.ai(对话框流)的完整说明:https://www.kommunicate.io/blog/how-to-integrate-bot-using-dialogflow-in-kommunicate-1ac32911a7d0/

免责声明:我为kommunicate.io工作

答案 1 :(得分:2)

感谢您的提问。我们也想要这个。现在,您可以使用Botcopy进行此操作,Botcopy是将Dialogflow连接到您的网站的SaaS,用于在右下角进行自定义的富媒体浮动聊天。设置非常快捷,简单。链接为https://botcopy.com。它具有一键式OAuth和Google Cloud,因此您不必上载JSON文件,并且可以在Google Assistant响应中构建丰富的功能,而Botcopy可以使用这些功能。希望对您有所帮助。

答案 2 :(得分:1)

是的,dialogflow中有一种方法可以做到这一点。您只需要在html / angular或您要设计的任何框架中创建一个简单的聊天窗口即可。您可以捕获用户输入的查询并进行ajax调用并将其传递给dialogflow。再次取决于您使用的api版本。 Dialogflow为您提供v1 / v2 API,它本身会更改请求格式。请看下面的代码(使用v1 api):

function captureUserQuery() {
         var text = jQuery(".my-text").val();
         dialogflowApi(text);  
}

function dialogflowApi(text) {
         jQuery.ajax({
            type: "POST",
            url: "https://api.dialogflow.com/v1/query?v=20170712",
            contentType: "application/json; charset=utf-8",
            headers: {
                "Authorization": "Bearer " + access_token
            },
            data: JSON.stringify({
                query: text,
                lang: "en",
                sessionId: "chatbot"
            }),
            success: function(response) {
                console.log("success");
                // Here you will get the response to your query in json, you will have to parse it based on the type it has like text, image, card etc. & show it to user. 
                parseResponse(response); // function to parse your response. 
            },
            error: function() {
                console.log("Error");
            }
        });
}

希望这可以回答您的查询。让我知道你是否还有空。

答案 3 :(得分:0)

查看Dialogflow的网络演示集成:https://dialogflow.com/docs/integrations/web-demo

或者,您可以使用query (v1)detectIntent (v2) API自行集成您的网站,以使用用户的邮件查询您的代理,并获取Dialogflow代理响应的响应。< / p>

答案 4 :(得分:0)

如果您打算将自己的机器人与facebook messenger集成, 这对你来说是个好消息, 客户聊天插件(测试版)

  

Messenger平台的客户聊天插件允许您集成   您的Messenger直接体验到您的网站。这允许你的   客户可以随时与您的企业进行互动   他们在Messenger中获得个性化的富媒体体验。

转到并访问Customer Chat Plugin (beta)

答案 5 :(得分:0)

您可以通过更新dialogflow提供的iframe标签来实现。您可以将所需的任何html页面放入iframe标记内。您还可以添加一个浮动按钮/图标来激活它:

<?php
if ( is_front_page() ) {

    ?>
    <div class="chosir_mon_livre_home">
        <div class="col-md-5  chosir_mon_livre ">
            Cherchez <br> mon livre
        </div>
        <div class="col-md-7">
            <div class="styled-select-product blue slate" style="border: 2px solid #ececec;
        border-radius: 10px;
        width: 250px;
        float: right;
        margin-right: -1px;
        background: #ececec;">
                <select name="ville" class="select_choice_ville">
                    <option value="0" selected="selected" disabled="disabled">Sélectionner</option>
                    <?php
                    $categories = get_terms( [ 'taxonomy' => 'ville', 'hide_empty' => false ] );

                    foreach ( $categories as $cat ) {
                        ?>
                    <option value="<?= $cat->term_id; ?>">
                        <?= $cat->name; ?>
                    </option>
                    <?php
                    }

                    ?>
                </select>
            </div>
        </div>
    </div>


<?php  } ?>

答案 6 :(得分:0)

您可以只使用此聊天插件,检查php版本:https://board.support