Include ChatGPT on your WordPress website
Tags: wordpress, chatgpt, webdev, tutorial
Published: 2023-01-25 13:10:56

If you have an [API account with OpenAI](https://beta.openai.com/account/usage), you can easily access ChatGPT using their API. If you've got an [Aista Magic Cloud account](https://aista.com), you can easily include a JavaScript file on your website that allows your users to chat with ChatGPT using your Aista Magic Cloudlet as a gateway, providing dozens of additional features. If you have a WordPress website, you can include a JavaScript file allowing you to have your own version of ChatGPT3 on your WordPress blog or site. The combination of these three systems becomes the following.

![Include ChatGPT on your WordPress site](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ipvdwvkrt44pcullyudr.jpeg)

You can [try it out here](https://aista.com) if you wish.

It requires zero coding, but it does require some understanding of how Aista Magic works. I go through most of the points in the following video, but please continue reading after having watched it, since I didn't go through _everything_ you need to know.

{% embed https://www.youtube.com/watch?v=ud0u0PuZO9Q %}

In addition to following the recipe in the above video, you also have to _turn off_ roles authentication and authorisation. By default, our prompt API will require users to be authenticated as _"root"_ users. If you want everybody to be able to access your ChatGPT chatbot, you'll have to turn this off. In the screenshot below you can see it says _"Roles"_. Expand this thing, remove _"root"_, and click save. This ensures everybody visiting your website can use ChatGPT.

![Configuring your ChatGPT API](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/scfbngug942sv06p9c5i.jpg)

## Preventing bots from accessing your bot (PUN!)

In addition we would encourage you to [register a Google reCAPTCHA account](https://www.google.com/u/0/recaptcha/admin/create). This prevents bots from accessing your bot (pun!). If you do, change the reCAPTCHA value shown in the above screenshot to 0.3 or 0.5 to prevent bots from using your account. This ensures only human beings visiting your website can actually use your chatbot.

If you turn on bot protection by using reCAPTCHA (which we _highly_ recommend you do), you will need to add your `site-key` and `secret` to your server's configuration. You can find this in the _"Misc/Configuration"_ parts, inside your `auth` section. Make sure you copy and paste your `site-key` and `secret` _exactly_ as given you by Google.

Notice, this is a service we are charging for. However, we allow people to play with it for a month before deciding if they want to buy a professional plan or not. If you're a bit JavaScript savvy, you can also probably figure out how to create your own JavaScript file, by _"forking"_ the existing one. Notice, if you do this, you need to include your file in your Magic Cloudlet's _"/etc/system/openai/js/"_ folder. When our backend is looking for JavaScript files to include, it will use the _"file"_ query parameter, and first look in this folder to see if it can find a file - And only if it does not find a _"xyz.js"_ file in this folder, traverse into its default JavaScript folder to try to resolve which JavaScript file to actually use.

By default, our API will also log all questions and answers. You might want to turn this _off_, and if not you might want to periodically purge your cache, to avoid having your cloudlet crash due to having exhausted its storage space. You can do this with the above _"Supervised"_ checkbox. If it's on, you will find all requests (anonymised) in the _"Cache"_ tab control. And you can in fact turn on caching such that the same questions given multiple times returns instantly the same answer it returned previously. The last parts preserves some bandwidth, and also makes your thing more responsive and fast.

## Purchasing a professional account

Notice, the demo cloudlet only comes with some 20GB of bandwidth. Once you see your website starts getting a lot of visitors due to this thing, you might want to immediately purchase a professional cloudlet, to ensure your bot continues working. For security reasons, all requests to OpenAI has to go through your cloudlet. Hence, every byte going towards OpenAI also becomes a byte consuming bandwidth from your cloudlet. You can update your cloudlet to a professional cloudlet from our [hub](https://hub.aista.com).

You are also responsible for your own OpenAI API account, and you need an API account with OpenAI. However, in the beta period OpenAI gives access to _"text-davinci_003"_ for free, so this shouldn't cost you anything, at least not for the moment. However, this might cost you additional money later if OpenAI decides to charge for access to their ChatGPT3 model.

## Exchanging the default JavaScript ChatBot file

The latest release of Magic has one annoying bug, which is that it keeps on _"blinking"_ the question. If you've got some skills, you can probably copy and paste the contents of [this file](https://github.com/polterguy/magic/blob/master/backend/files/system/openai/front.files/default.js) using Hyper IDE beneath _"Create"_, and replace the content of your current file with the content of the file from the link above. See in the screenshot below how to edit the JavaScript file that renders the chatbot.

![Editing your ChatBot JavaScript file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xm9hykapmtxh4usfealy.jpg)

We have fixed the blink bug, but we're not scheduled for another release for another week or two. At which point the blinking will simply disappear, since we automatically upgrade all cloudlets when we create a release. However, for now, you can follow the above steps to fix the blinking bug yourself. You have to turn _on_ the _"System files"_ checkbox to find this file though.

This file can also be copied and pasted into your _"/etc/system/openai/js/"_ folder by copying its content, create a new file, and name it e.g. _"foo.js"_, at which point when you include your chatbot on your WordPress site, you need to exchange the _"file"_ query argument to _"foo"_ allowing you to include your _own_ custom JavaScript file, to accommodate for your own profile, design, whatever. If you've got some CSS and JavaScript skills, you'll probably figure it out.

Notice, this works with any CMS system out there that allows you to include custom HTML tags, and not only WordPress of course. Anyways, that was it for today. If you want to include ChatGPT on your own WordPress website, you can register below.

* [Include ChatGPT on your WordPress website](https://aista.com)