php - How to integrate Botman in Symfony 3 (controller and view )?

one text

Solution:

I assume that you use the Botman web widget to render the chat box.

You need three routes and three controller functions:

One that will send back the page that contains the chatbot widget ("homepage" in the following example),
One that will deal with the Botman logic and return the serialized answers of the bot("message" in the following example),
One that will send back the chat frame ("chatframe" in the following example).

here is a basic example:

<?php

namespace AppBundle\Controller;

use Symfony\Component\Routing\Annotation\Route;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Bundle\FrameworkBundle\Controller\Controller;

use BotMan\BotMan\BotMan;
use BotMan\BotMan\BotManFactory;
use BotMan\BotMan\Drivers\DriverManager;


class BobotController extends Controller{

    /**
     * @Route("/message", name="message")
     */
    function messageAction(Request $request)
    {
        DriverManager::loadDriver(\BotMan\Drivers\Web\WebDriver::class);

        // Configuration for the BotMan WebDriver
        $config = [];

        // Create BotMan instance
        $botman = BotManFactory::create($config);

        // Give the bot some things to listen for.
        $botman->hears('(hello|hi|hey)', function (BotMan $bot) {
            $bot->reply('Hello!');
        });

        // Set a fallback
        $botman->fallback(function (BotMan $bot) {
            $bot->reply('Sorry, I did not understand.');
        });

        // Start listening
        $botman->listen();

        return new Response();
    }
    
    /**
     * @Route("/", name="homepage")
     */
    public function indexAction(Request $request)
    {
        return $this->render('DoctixFrontBundle:Chat:homepage.html.twig');
    }
    
    /**
     * @Route("/chatframe", name="chatframe")
     */
    public function chatframeAction(Request $request)
    {
        return $this->render('DoctixFrontBundle:Chat:chat_frame.html.twig');
    }
}

And you need two views, first the chat frame chat_frame.html.twig (a simple copy-paste of the one provided in Botman web widget's documentation):

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>BotMan Widget</title>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/botman-web-widget@0/build/assets/css/chat.min.css">
    </head>
    <body>
        <script id="botmanWidget" src='https://cdn.jsdelivr.net/npm/botman-web-widget@0/build/js/chat.js'></script>
    </body>
</html>

And the page that will contain the chat widget in its bottom right corner homepage.html.twig:

<!DOCTYPE html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>Hello World!</title>
    </head>
    <body>
        <h1>Hello!</h1>
        <p>Click on the chat button.</p>
        <script>
            var botmanWidget = {
            frameEndpoint: '{{ path("chatframe") }}',
            chatServer: '{{ path("message") }}',
            introMessage: 'Hello, I am a Chatbot',
            title: 'My Chatbot', 
            mainColor: '#456765',
            bubbleBackground: '#ff76f4',
            aboutText: ''
        };
</script>
<script src='https://cdn.jsdelivr.net/npm/botman-web-widget@0/build/js/widget.js'></script>
    </body>
</html>

Source