How to Add AI Chat to Your Website in 5 Minutes

In today's digital landscape, businesses are constantly seeking innovative ways to enhance customer engagement and provide seamless user experiences. One effective way to achieve this is by embedding an AI chatbot widget on their website. FatihAI is a cutting-edge platform that enables developers to integrate AI-powered chatbots into their websites with ease. In this blog post, we will delve into a step-by-step guide on how to embed a FatihAI chatbot widget on any website, covering the process of obtaining an API key, adding a script tag, customizing colors and position, and handling conversations.

To get started, the first step is to obtain an API key from FatihAI. This can be done by signing up for a free account on the FatihAI website and navigating to the dashboard. Once logged in, click on the "API Keys" tab and generate a new key. This API key will be used to authenticate and authorize the chatbot widget on your website. It is essential to keep this key secure and not share it with anyone, as it grants access to your chatbot's functionality.

After obtaining the API key, the next step is to add a script tag to your website's HTML code. This script tag will load the FatihAI chatbot widget and render it on your website. The script tag should be added to the footer of your HTML file, just before the closing body tag. The following code example demonstrates how to add the script tag:

<script>
  (function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = 'https://fatihai.app/js/widget.js';
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'fatihai-widget'));

  window.fatihaiSettings = {
    apiKey: 'YOUR_API_KEY_HERE',
    widgetColor: '#3498db',
    widgetPosition: 'right'
  };
</script>

In this code example, replace YOUR_API_KEY_HERE with the actual API key obtained from the FatihAI dashboard. The widgetColor and widgetPosition variables can be customized to match your website's branding and design.

Customizing the colors and position of the chatbot widget is a crucial step in ensuring a seamless user experience. The widgetColor variable can be set to any valid hex code, and the widgetPosition variable can be set to either left or right. Additionally, you can customize the chatbot's behavior by modifying the window.fatihaiSettings object. For example, you can set the widgetSize variable to large or small to change the size of the chatbot widget.

Handling conversations with the chatbot widget is also a critical aspect of providing a good user experience. The FatihAI platform provides a range of features to handle conversations, including intent recognition, entity extraction, and response generation. To handle conversations, you can use the FatihAI API to send and receive messages between the chatbot and your website. The following code example demonstrates how to send a message to the chatbot:

window.fatihai.sendMessage('Hello, how can I help you?');

This code sends a message to the chatbot, which will then respond with a relevant answer. You can also use the window.fatihai.receiveMessage function to receive messages from the chatbot and handle them accordingly.

To take it a step further, you can integrate the chatbot widget with your website's backend systems to provide a more personalized experience for your users. For example, you can use the FatihAI API to retrieve user data and use it to tailor the chatbot's responses. The following code example demonstrates how to retrieve user data using the FatihAI API:

window.fatihai.getUserData().then(data => {
  console.log(data);
});

This code retrieves the user data from the FatihAI platform and logs it to the console. You can then use this data to customize the chatbot's responses and provide a more personalized experience for your users.

In conclusion, embedding a FatihAI chatbot widget on your website is a straightforward process that can be completed in a few simple steps. By following the steps outlined in this guide, you can provide a seamless and personalized experience for your users and enhance your website's engagement and conversion rates. If you're interested in trying out FatihAI, sign up for a free account today at https://fatihai.app and discover the power of AI-powered chatbots for yourself. With its robust features and easy-to-use interface, FatihAI is the perfect solution for businesses looking to take their customer engagement to the next level. So why wait? Try FatihAI today and start providing a world-class experience for your users.

Here is the full code example:

<!DOCTYPE html>
<html>
<head>
  <title>FatihAI Chatbot Widget</title>
</head>
<body>
  <!-- Add the script tag to the footer of your HTML file -->
  <script>
    (function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = 'https://fatihai.app/js/widget.js';
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'fatihai-widget'));

    window.fatihaiSettings = {
      apiKey: 'YOUR_API_KEY_HERE',
      widgetColor: '#3498db',
      widgetPosition: 'right'
    };

    // Send a message to the chatbot
    window.fatihai.sendMessage('Hello, how can I help you?');

    // Receive messages from the chatbot
    window.fatihai.receiveMessage().then(message => {
      console.log(message);
    });

    // Retrieve user data using the FatihAI API
    window.fatihai.getUserData().then(data => {
      console.log(data);
    });
  </script>
</body>
</html>

Remember to replace YOUR_API_KEY_HERE with your actual API key from the FatihAI dashboard. With this code example, you can get started with embedding a FatihAI chatbot widget on your website and provide a world-class experience for your users. Sign up for a free account today at https://fatihai.app and start exploring the possibilities of AI-powered chatbots.