Try our Chatbot Themes

One of our clients needed to dynamically embed different themes according to what page the user was on. We decided to check for a global JavaScript "hook", which if exists, overrides the default theme from the QUERY parameter of the chatbot inclusion itself.

If you've got multiple different designs on your page, or different landing pages with different color themes, you can still embed your chatbot only once, while still have it use different themes according to some criteria you decide yourself. Before I explain how it works, let's try it out by creating a "theme selector" allowing you to preview our own chatbot with all available themes.

If you change the value of the above selector you can preview all of our existing chatbot themes to see how they look.

How it works?

Our chatbot embed tag looks as follows:

<script src="https://ainiro.io/magic/system/openai/include-chatbot?theme=modern-square&type=ainiro_io&header=Ask%20about%20our%20services%20or%20products&button=AI%Chatbot&color=%23fefefe&start=%237892e5&end=%23142660&link=%23fe8464" defer async></script&ht;

If you look carefully at the above JavaScript inclusion tag you will see css=modern-square. This will ensure that the chatbot uses the theme called "frank", which is the theme with our mascot robot that's used by default on our site in general.

However, as the chatbot includes this CSS file, it will check if there exists a global JavaScript function named getAiniroChatbotCssFile. If this function exists globally on your page, the chatbot JavaScript file will invoke this function, and if the function returns a non-null value, it will use the return value from this function as its CSS theme. Below is an example of such a JavaScript function that will always return "scandinavian-chocolate", and therefor override whatever theme you've selected when creating your embed tag.

function getAiniroChatbotCssFile() {
   return 'modern-square';
}

If you include the above JavaScript on your page and ensure it's executed before you include your chatbot, the above JavaScript function will "override" the default theme you chose when you created your embed tag.

Notice, for 99% of our users dynamically changing what theme to use is probably much easier by simply changing the theme name in your embed tag, such as changing from css=frank to css=scandinavian-chocolate. This should be your goto solution 99% of the time.

However, if you can for some reasons only include the embed tag once on your page, in for instance your CMS template file or something, yet you still have different color profiles on your site, resulting in that you need to use for instance two different chatbot themes according to what page the user is visiting - The above might provide a generic solution allowing you to programmatically change the chatbot's theme.

For the record, if you're interested in designing your own theme entirely from scratch, Aria wrote an article with an associated YouTube video about the process a couple of months ago.

• Design your own chatbot

Dynamically change the model/type

Another client had similar requirements. They are using Docusaurus to document their software. Their problem is that they have 3 different software systems, so they needed 3 different chabots - But all these systems were documented using the same website. So we've got one website, and one embed tag, for 3 different chatbots.

This client had 3 different secondary URLs for each of their 3 different systems, implying we could easily determine which chatbot the user needed to use according to the base URL of the page the user was currently visiting. Hence, we needed a similar solution to dynamically select the model/type to invoke on the server.

Below is an example of a JavaScript snippet that instead of using the default type selected when creating your embed script, will instead always use the "foo" model.

function getAiniroChatbotType() {
   return 'foo';
}

AINIRO, more than just a chatbot

The above are generic solutions for changing the chatbot's behaviour according to your requirements. We've previously created FAQ solutions allowing you to create "hyperlinks" that triggers the chatbot somehow, resulting in that your page interacts with the chatbot, and becomes a "living thing", allowing you to extend the chatbot as you see fit.

When we deliver a chatbot, we do more than just send you an embed script. We analyse your presonal requirements, ask lots of questions, to ensure we can deliver a custom tailored ChatGPT chatbot experience for your users, covering your requirements.

This is of course much more work for us, and is the reason why we need time to deliver your chatbot. But at the end of the day, it ensures you're given a personalized chatbot, covering your exact needs, resulting in hopefully a better product and experience for your users.