Full Screen ChatGPT Chatbot

We're working with an interesting client these days who wants to create a "go to landing page" for information related to his industry. To accomplish this the client doesn't want his AI chatbot to render a button you need to click to access it, but rather have a chatbot resembling ChatGPT.

The point being that he wants a single landing page in his website, where people can ask questions related to his industry, with the incentives for him being that he can sell products for his vertical. This allows the client to position himself as a source for general information related to his industry, resulting in his company getting more clients and selling more products related to the industry.

It's an experimental feature for the time being, but in the video below I am demonstrating the basics of how it works.

How it works

There are two new optional QUERY parameters for the chatbot embed script you'll need to apply to make this work. These are as follows.

• parent_node - This is the ID of some HTML page on your page
• render_button - Set this to false to remove the "chatbot button"

In addition to the above additional QUERY parameters, you'll need to create a "host HTML element" where the chatbot is injected. Below is an example taken from the video above.

<div id="foo">
</div>

If you apply all the above changes, the chatbot button will not render on your page, and the chatbot will initialise inside the host HTML element, making it initially visible such as illustrated in the above video. In the above host HTML the `ID`` of your element is "foo", implying your embed script should resemble the following.

/include-javascript?parent_node=foo&render_button=false&css=scandinavian-chocolate-inline.....

Notice, for the time being we only have one theme that actually support this, but we will be adding additional themes in the future. We will also add UI in the embed form of your dashboard allowing you to parametrise your embed script automatically. But for the time being the process is a little bit manual and requires some basic understanding of HTML to implement.

The only theme you can do this with for the time being is our "scandinavian-chocolate-inline" theme. If you're CSS savvy, you can easily create your own theme based upon the existing themes and add the following to your custom theme at the bottom of your CSS file.

/* This is the ONLY thing you need to add to an existing theme to have it become "inline" */
.aista-chat-wnd {
  width: 100% !important;
  max-width: 100% !important;
  overflow: auto !important;
  position: relative !important;
  display: block !important;
  z-index: unset !important;
}
.aista-chat-close-btn {
  display: none !important;
}

What the above CSS does is basically to "undo" the absolute positioning of your chatbot, for then to hide the close button, preventing the user from being able to close the chatbot.

Have a Custom AI Solution

At AINIRO we specialise in delivering custom AI solutions and AI chatbots with AI agent features. If you want to talk to us about how we can help you implement your next custom AI solution, you can reach out to us below.

• Contact AINIRO