AI Engine is a free plugin (with a pro version) which lets you bring the power of ChatGPT, Dall-E 2 and other OpenAI artificial intelligence services to WordPress. It lets you easily incorporate AI-generated content and images into your site and even lets you add a ChatGPT-style chatbot to your site. Here are some notes on using AI Engine specifically within Divi.
Add an AI Chatbot in Divi Builder
AI Engine can be used to add a chatbot directly on your site. Begin by entering your OpenAI API key in the AI Engine settings and (optionally) configuring your chatbot under the AI Engine settings "Legacy Chatbot" tab (this tab supports a simpler single chatbot setup that the "Chatbots" tab). You can now use the following shortcode to add the chatbot to your site:
[mwai_chat]To use it in the Divi Builder, add it into a Divi Text Module in the "text" tab like so:
Next add the following CSS to your site to fix some style issues due to conflicting Divi styles:
/* Fix wrapping on number / bullet lists */
.et_pb_text .mwai-text > ol > li > p,
.et_pb_text .mwai-text > ul > li > p {
display: inline;
}
/* Add spacing at end of bullet lists */
.et_pb_text .mwai-text > ol,
.et_pb_text .mwai-text > ul {
padding-bottom: 1em !important;
}Related Post: Adding CSS to the Divi Theme
You should now have a working ChatGPT chatbot displaying on your site, like so:
Note that usage of the chatbot will be billed to your OpenAI API key, so you may want to either place the chatbot on a private page if it is for personal use only, or carefully monitor your usage in your OpenAI account.
0 Comments