What steps do I need to take to integrate my RASA assistant into my personal website?

Deploying my rasa chatbot on my live website is my next step. While Rasa worked smoothly on my localhost server, as a newcomer to web development, I found the official guide provided by RASA in the link below a bit challenging to comprehend:

The RASA guide instructs me to include the following content in a credentials.yml file:

socketio:
  user_message_evt: user_uttered
  bot_message_evt: bot_uttered
  session_persistence: true

Furthermore, it mentions the option of using REST Channels with a script command: run rasa. However, there's no indication if I need to transfer the project folder to my website or how to replicate the VENV setup, or even how to execute the "rasa run" script from my site.

This is what I accomplished in my local setup:

  1. I edited the credentials.yml with the code snippet stated above along with: socketio: user_message_evt: user_uttered bot_message_evt: bot_uttered session_persistence: true rasa: url: "http://localhost:5002/api"
  2. I activated the Venv named vvv via: conda activate vvv
  3. I ran the command:
    rasa run -m models --enable-api --cors "*" --debug
    (inside the project's directory)

https://i.sstatic.net/aCVDE.png

  1. In my index.html file, the value of socketUrl was set to "http://localhost:5005"

https://i.sstatic.net/qQSjA.png

As shown in the screenshots below, the chatbot was functioning well:

https://i.sstatic.net/7rWE4.png

My challenge now is figuring out how to deploy this on my own website. Attempting to directly copy the folder to my website didn't yield any results. How can I trigger the command "rasa run -m models --enable-api --cors "*" --debug" from my website? Is it just a matter of integrating a simple JavaScript code to call upon the assistant, or does it involve more complex steps?

Answer №1

To incorporate a chat widget on your website, consider utilizing the Rasa Web Chat plugin. This plugin facilitates the addition of a chat interface. Review the documentation for instructions on configuring the necessary JavaScript to create the chat widget and establish connectivity with the Rasa server.

<div id="webchat"/>
<script src="https://storage.googleapis.com/mrbot-cdn/webchat-latest.js"></script>
<script>
 WebChat.default.init({
 selector: "#webchat",
 initPayload: "/get_started",
 socketUrl: "http://localhost:5500",
 socketPath: "/socket.io/",
 title: "My Chatbot John",
 subtitle: "Ask me",
})

For an illustration of a Rasa assistant deployed on a static site (Github), refer to this example.

Answer №2

To enable your Rasa Chatbot, it must first be deployed to a server and accessed via a REST API.

If you opt to deploy on Heroku using Docker, consider utilizing a multi-stage Docker build process and selecting the slim version of Python for efficiency.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Obtaining MIME-TYPE from a Base 64 String: A Handy Guide

After receiving a base64 encoded string from the backend, I am decoding it in Javascript to display it on the browser. The content of this string could be any type of file such as .pdf, .img, .docx, .zip, etc. The base64 string I have does not contain th ...

Check to see if two sets of coordinates fall within the specified radius

I'm currently working on analyzing the collision data for major intersections in my city by aggregating it with the location information. My main goal is to determine the number of accidents that occurred within a 20-meter radius of each intersection. ...

Organizing into distinct categories using Angular

I'm a beginner in the world of Angular and programming, seeking guidance on how to learn. I have an HTML page with 5 tabs: "Who," "What," "Where," "When," and "Events." The code snippet below showcases my current setup. Can anyone provide assistance o ...

Leveraging various techniques within a single controller in AngularJS

I am seeking assistance and advice on a coding issue I am facing. I am attempting to use two methods in one controller. The first method is to display selected rooms, while the second method is to display selected pax. However, only the first method seems ...

Retrieving the output from a nested function within a function in a Node.js application connected to a

I'm currently working on a basic web application that interacts with a database by performing INSERT and SELECT operations on a single table. While I have utilized a function from various tutorials, I am struggling to retrieve the results from the SEL ...

How to implement scrollIntoView in Vue 3 with script setup

Having some trouble with scrolling to a specific element when clicked. I keep getting this error message. Uncaught TypeError: element.scrollIntoView is not a function Here is my script <script setup> import { ref } from 'vue' function goT ...

Encountering a post route error when utilizing async await has hindered my ability to add a new product

Recently, I attempted to update my post route using async await, and unfortunately made some mistakes. Now I'm unsure how to correct it properly. router.post('/', async (req, res, next)=> { try{ const updatedProduct = await ...

Tips for eliminating white spaces when text wraps onto a new line

Imagine having the following code snippet. Essentially, I have a layout that needs to display 'vs prev period' with a percentage in the same line. To achieve this, I utilized display: flex. The issue arises when we require the gap between the tw ...

Having issues making div elements with javascript

I am having trouble generating new divs when a specific div is clicked. Despite my efforts, nothing seems to be happening and the console isn't showing any errors. I've searched online for solutions but haven't found anything that addresses ...

Tips for setting the textfield value in JSP using Javascript

I am in need of a way to create a random number that will be displayed in the textfield once the user clicks on the "Generate" button. Can someone guide me on how to assign the value of the "output variable" to the "randomNum" textfield? Sample HTML code: ...

Apache causes HTML download tag to malfunction

I have an HTML file that includes the following code: <a href="/Library/WebServer/Documents/file.zip" download="file.zip"> Download here </a> When I test this HTML page on Chrome, it successfully allows me to download the file. However, when ...

Using JavaScript's `Map` function instead of a traditional `for`

My dataset consists of a csv file containing 5000 rows, with each row having thirty fields representing measurements of different chemical elements. I aim to parse and visualize this data using D3js. Upon reading the file, I obtain an array of length 5000 ...

Update the 'checked' attribute of a radio button when the form is submitted

How do I dynamically change the content of an HTML table based on which radio button a user selects using jQuery? For example, when the page loads, I want the United Kingdom radio button to be checked and the table content to display as 'blue'. I ...

Tips on removing previously selected files from a Bootstrap 4 input file

I am currently facing an issue with a form that includes an input file implemented using Bootstrap 4. The functionality of this input file depends on Javascript: when the user clicks on the "browse files" button, a window opens for file selection, and upon ...

Difficulties encountered when trying to load liquid using Javascript

Having trouble loading the Shopify liquid object {{product.price | json}} into JS, as it's displaying NaN with the current code on the front end. Any suggestions on how to properly pass liquid into JS? I've tried two functions but neither seem t ...

The face textures are not being applied correctly to the model imported in THREE.js

I'm having trouble importing a model exported from blender using the THREEJS exporter. The model loads correctly in my scene with the materials applied, such as the car appearing yellow and the glass being transparent as intended. However, I am facin ...

Step-by-step guide on how to change the appearance of a <DIV> using data from a database (JSON

After retrieving data from a database as a JSON file, I have written code to loop through an item (portOn) and determine if certain ports are present in the array. If a port is found in the array, its corresponding variable is set to true. var portG01,port ...

Unable to retrieve data from the $.getJSON method

Using $.getJSON in jQuery, I am retrieving the necessary data from the server. Below is an example of how it is structured: $.getJSON("/dataParser/parseVoltage",function(jsondata, status) { if (status == "error") { console.log("Error occurred whil ...

Problem with targeting the .prev() and closest() class of a text input box

Could you please review This Demo and advise why I am unable to select the first .fa class before the text box #name ? This is what I have been trying: $(this).prev().closest(".fa").addClass("err"); within this code block <div class="row"> & ...

Managing 404 errors when loading cached scripts with jQuery

I need to load a JS file using jQuery, but I want the cache to be used if available. Unfortunately, I can't set the global ajax cache setting to true for reasons beyond the scope of this post. This means using the getScript method is not an option. Fo ...