Using AI Engine with Divi

|

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;
}

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

Submit a Comment

Comments are manually moderated and approved at the time they are answered. A preview is shown while pending but may disappear if your are cookies cleared - don't worry though, the comment is still in the queue.

Your email address will not be published. Required fields are marked *.

We may earn a commission when you visit links on our website.