Skip to main content

Deploy your Chatbot

info

Before deploying your chatbot, make sure it is configured to be publicly accessible in the configuration menu. Refer to the configuration page for more information.

The deployment of the Fireraven Secure Chatbot is supported in 2 different ways at the moment. It is available as a React Component which can be imported into your React application directly from NPM. Alternatively, you can import this component into a basic HTML page, given a React implementation is provided with the Fireraven Secure Chatbot component.

tip

The information presented in this page is also available on the NPM page of the @fireraven-ai/secure-chatbot package.

Importing into a React application​

In order to import the Fireraven Secure ChatBot in a React project, it must first be added to the project's package.json file.

Add the NPM package
# Using yarn
yarn add @fireraven-ai/secure-chatbot

# Using npm
npm install @fireraven-ai/secure-chatbot

The module can then be imported in any page as follows. The component has a fixed positioning, making it's placement only relevant as it will be rendered at the same time as the component importing it. The styles must be imported seperatly from the component. It is recommended to add the following code to import the chatbot and the implement FireravenSecureChatbot in the app.js file of your React project.

import { FireravenSecureChatbot } from "@fireraven-ai/secure-chatbot";
import "@fireraven-ai/secure-chatbot/dist/style.css";

And use the component while providing the correct props. The component is built using typescript, so typing is available out-of-the-box. The only mandatory prop is the clientID, without which the component can't operate.

interface FireravenSecureChatbotProps {
  clientId: string; // The clientID associated with the Chatbot used to answer messages
  conversationURL?: string; // The API endpoint used to create a conversation. Default: https://api.fireraven.ai/client/conversations
  messageURL?: string; // The API endpoint used to save a message.  Default: https://api.fireraven.ai/client/messages
  answerURL?: string; // The API endpoint used to answer a message.  Default: https://api.fireraven.ai/client/answer
  title?: string; // The title displayed on the top bar
  welcomeMessage?: string; // The welcome message displayed when opening the Chatbot. This text can be styled as markdown.
  tooltipMessage?: string; // The tooltip shown left of the ChatBot start button
  image?: string; // The image shown on the ChatBot start button
}

An example of the minimal import looks like the following

<FireravenSecureChatbot
  clientId="<ClientID of your Chatbot here>"
/>

Import directly in HTML​

In order the use the Fireraven Secure ChatBot directly in an HTML file, you must use the following structure including the stylesheet which is imported at the top. This is an ES Module and should work in all modern browsers.

<head>
  <!-- Include the stylesheet -->
  <link rel="stylesheet" href="https://unpkg.com/@fireraven-ai/secure-chatbot/dist/style.css" />

  <!-- Import the dependencies which can be simply imported from CDNs -->
  <script type="importmap">
    {
      "imports": {
        "react": "https://esm.sh/react",
        "react/jsx-runtime": "https://esm.sh/react/jsx-runtime",
        "react-dom": "https://esm.sh/react-dom",
        "@fireraven-ai/secure-chatbot": "https://unpkg.com/@fireraven-ai/secure-chatbot"
      }
    }
  </script>

  <!-- Import and setup the component -->
  <script type="module">
    import React from "react";
    import ReactDOM from "react-dom";
    import { FireravenSecureChatbot } from "@fireraven-ai/secure-chatbot";

    // Create the component and configure the parameters
    const client = React.createElement(FireravenSecureChatbot);
    client.props = {
      clientId: "<The ClientID of your Chatbot>",
      // Other props as specified in the React Component mentionned above
    };

    // Place the component in the page
    ReactDOM.render(client, document.getElementById("root"));
  </script>
</head>

<body>
  <!-- Include a div with an id where the component will be placed -->
  <div id="root"></div>
</body>

Result​

After successfully importing the component in your application, you can start using it as any chatbot.

Fireraven Secure Chatbot Closed Fireraven Secure Chatbot Opened