Home » Plugins » Elementor Widget for ChatGPT Assistants

Elementor Widget for ChatGPT Assistants

Name: Elementor Widget for ChatGPT Assistants | Joshua Thompson
Uploaded: 2025-02-17T19:22:41+00:00
Duration: 7 min 47 s
Description: Boost engagement with the Elementor Widget for ChatGPT Assistants! 🤖 Add AI chat to your site, fully editable via WordPress and Elementor 🚀

Boost engagement with the Elementor Widget for ChatGPT Assistants! 🤖 Add AI chat to your site, fully editable via WordPress and Elementor 🚀

Only $30/lifetime

In Action

Give it a go.

Below is the Elementor widget you can access too! I’ve trained it as an AI version of me.
Send it a message so you can get a feel for what your users can experience.

Josh: How can I help you today?

Messages sent: 0/1

No messages remaining ❌

Intelligent AI

Trained by you.

Our ChatGPT Elementor Plugin uses the Assistants API – so you can ‘train’ your Assistant on a specialist subject!

Upload Documents

The Assistants API allows you to upload documents and ‘train your AI’ on a certain subject. Think customer service or sales questions!

Easy Setup

Just enter your ChatGPT API key, your assistant ID, license key, message limit and you are all set! Style the Elementor Widget to fit your brand.

Accurate Analytics

Keep an eye on how often your users are interacting with your AI Chatbot with an Analytics dashboard showing users and chat length.

EXAMPLE

Use Cases.

There’s so many cool use cases for our ChatGPT Elementor Plugin.

Customer Service

✨ Provide quick response to your customer questions

FAQs

⭐️ Answer FAQs about your products or services.

Integration

🤖 Show your business is actively using AI.

TESTIMONIALS

Real Reviews.

We are extremely proud of our Plugin reviews. Get a taste of what people are saying ⭐️

“We use the Elementor ChatGPT Widget to provide quick FAQ answers to our customers, and it has been a game-changer for our website. The AI-powered responses help visitors get the information they need instantly, reducing the workload on our support team.”

Ryan

School of Play

“Love this Plugin so much! Use it across 4 different sites, a genuine gamechanger.”

Vicky

BeSpoke Marketing

5000+

Messages Sent

27+

Countries Served

“Would fully recommend – documentation is excellent easy to setup!”

Carol

TCI

“The Elementor ChatGPT Widget has completely transformed how we interact with our website visitors. It provides instant, accurate answers to common questions, making our site more engaging and user-friendly.”

James

Finance4u

Documentation

How to.

We’ve made using this plugin incredibly simple. Follow our guides below to discover exactly how to set everything up.
Need Support? – We actually reply. Just send us an email here.

Install

After making payment for your license your receive an email with your license key and the plugin download.
Navigate to the ‘Plugins’ section of your WordPress dashboard and click ‘Add New Plugin’ and then ‘Upload Plugin’.
Upload the plugin zip file and then activate the plugin.

Settings

Once installed, you’ll see the plugin in the left hand menu called “ChatGPT Elementor”.
Hover over and click on “Settings”.
Enter your license key.

ChatGPT API Key

If you have already set up an API key in the Open AI assistants dashboard:

Navigate to this link.
Copy an existing key or create a new key.
Ensure the owner is set to “You”.
Ensure permissions are set to “All”.
Copy the generated key and paste in the Open AI API key field. Note – the key will start “sk-proj”.
Press ‘Save Settings’.

If you DON’T have the API key already set up then:

Visit this link.
Create an account or sign in.
Add credit (you can start with as little as $5).
Create a new key.
Ensure the owner is set to “You”.
Ensure permissions are set to “All”.
Copy the generated key and paste in the Open AI API key field. Note – the key will start “sk-proj”.
Press ‘Save Settings’.

Message Limit

The message limit is an important feature. Each message will cost you money. This is an extremely small amount and you can read about tokens here and pricing here.

Set the message limit between 1-100 for the number of messages a user can send.
Set 0 for unlimited messages.
Press save settings.

Assistant ID

Please click the ‘Assistant Setup’ tab for information on how to set the assistant up. Once set up, please copy the assistant ID (e.g asst_r0HhdtAX0hHLzV1xL2LeaU71) and paste it in this box. Press save settings.

Test Connection

Once you’ve setup the API Key and Assistant Id – you can then ‘test connection’ – which will return the ‘assistants name’ if everything is setup correctly.

Check for Updates

You can press this button to check for any updates to the plugin.

reCAPTCHA

reCAPTCHA is not required, however you can copy your site key and secret key from the Google reCAPTCHA console.

Assistant Concept

A ChatGPT Assistant is an AI-driven chatbot built on OpenAI’s models, designed to assist users by responding to queries and providing intelligent interactions.

Creating an Assistant

Navigate to the Assistants Dashboard.
Ensure you have active billing. You can read about pricing here (it’s very cheap and depends on the ‘model’ you use).
Click the “+ Create Assistant” button.

Setting up an Assistant

Here’s where the clever stuff happens!

Name – Give the assistant a name (e.g JT Chatbot or Website Chatbot).
Assistant ID – You’ll notice you have an ‘assistant id’ underneath the name field. Copy that and place that in the Assistant ID field in the settings of WordPress and save settings.
Create instructions. Below are my instructions for the chatbot on this page:

				
					You are a friendly chatbot who embodies Joshua Thompson from Doncaster, England, and you write in English (UK).  

Use your knowledge to respond to messages as if you are Joshua Thompson. Always check the vector store for relevant information about Josh before replying.  

For context:  
- My favourite football team is Leeds United.  
- My favourite player is Alan Smith.  

**Important:**  
- Do *not* cite the PDF or mention any sources in your responses e.g 【4:1†Information on Josh Thompson.pdf] —your replies should feel natural and personal.  

Always end your message with:  

So good to meet you 🙌
Don't forget to sign up to get my latest tips in your inbox—you'll find the sign-up form on this page.

Speak soon,
Josh 🫡

4. Model – This is very important. We know that different models cost different amounts. I’d suggest gpt-4-turbo, but it’s completely up-to you. You can learn about the different gpt models here.

5. File Search – This is where you can get clever! Upload a document that your assistant can reference. For example, I’ve uploaded a document called “information-on-josh-thompson.pdf”. The AI assistant will search through this file when providing a response. This allows the assistant to provide answers to FAQs or other queries.

6. Response Format – Please ensure this is text.

Test Your Assistant

Now you can test your assistant in WordPress! Once you’ve added your assistant ID and OpenAI key, you can press the ‘test connection’ button – which will return the assistant’s name 🎉

Elementor Widget

This is an Elementor only plugin, which means you need to have Elementor Installed.

Finding & Adding the Widget

With the Elementor page builder open, press the ‘add element’ in the top left hand corner of the screen.
Search for “ChatGPT” and the widget should show.
Drag this on-to the page.

Basic Settings

Initial Assistant Message: The first message shown from the assistant when the chat loads
Input Placeholder Text: Placeholder text shown in the message input field
Assistant Label: The label shown before assistant messages (default: “Assistant”)
User Label: The label shown before user messages (default: “You”)
Send Button Text: Text displayed on the send button
Expired Notice Text: Message shown when chat limit is reached
Show Preview Mode: Toggle to show/hide preview mode in Elementor editor

Chat Box Layout

Chat Box Width: Control the overall width of the chat interface
Chat Window Background: Background color of the chat message area
Border Color: Color of the chat window border
Border Width: Thickness of the chat window border
Border Radius: Rounded corners of the chat window
Box Shadow: Shadow effect around the chat window
Chat Box Height: Control the height of the chat message area

Input Container

Container Background: Background color of the input area
Container Border: Border settings for the input container
Container Border Radius: Rounded corners for the input container
Container Padding: Space inside the input container
Container Box Shadow: Shadow effect for the input container
Container Margin: Space around the input container

Input Field

Typography: Font settings for the input text
Text Color: Color of typed text
Placeholder Color: Color of placeholder text
Background Color: Input field background color
Padding: Space inside the input field
Border: Border settings for the input field
Border Radius: Rounded corners for the input field

Focus State

Focus Border Color: Border color when input is focused
Focus Background Color: Background color when input is focused
Focus Box Shadow: Shadow effect when input is focused

User Message Styling

Typography: Font settings for user messages
Text Color: Color of user message text
Background Color: Background color of user messages
Border Settings: Border configuration for user messages
Border Radius: Rounded corners for user messages
Label Styling: Custom styling for the user label

Assistant Message Styling

Typography: Font settings for assistant messages
Text Color: Color of assistant message text
Background Color: Background color of assistant messages
Border Settings: Border configuration for assistant messages
Border Radius: Rounded corners for assistant messages
Label Styling: Custom styling for the assistant label

Send Button Styling

Font Settings: Control button text font family, size, weight, and transform
Letter Spacing: Space between button text characters
Button Style: Choose between solid color or gradient background
Normal State: Configure button appearance in normal state
- Text Color
- Background Color/Gradient
Hover State: Configure button appearance when hovered
- Hover Text Color
- Hover Background Color/Gradient
Padding: Space inside the button
Size Controls: Control button dimensions

Notice Styling

Typography: Font settings for notice messages
Text Color: Color of notice text
Background Color: Background color for notices
Border Color: Color of notice borders
Padding: Space inside notices
Margin: Space around notices
Border Radius: Rounded corners for notices

ChatGPT Container

Container Padding: Space inside the main container
Container Margin: Space around the main container
Border Radius: Rounded corners for the container
Box Shadow: Shadow effect for the container
Border: Border settings for the container
Background Color: Container background color

Notes

All color settings support opacity/transparency
Most dimensions can be set in pixels (px), em units, or percentages
Typography settings include font family, size, weight, and line height
Border settings include style, width, and color
Box shadow settings include horizontal/vertical offset, blur, spread, and color

Analytics

The ChatGPT Widget includes built-in analytics to help track usage. You can access this from the ‘Analytics’ link under the menu in the back end of wordpress.

Analytics Information

Collects only anonymous usage data.
Does not store actual message content.
Shows the following:
- Total Chats
- User Messages
- Assistant Messages
- Total Messages
- Average Messages/Chat
- Breaks down daily statistics.

FAQs

How much is the plugin?

It’s $30/year or $2.5/month. We want to keep this as cheap as possible, but still offer regular updates.

How long does a license last?

The license lasts for a year and we will contact you before renewing.

Can I limit the number of messages a user can input?

Yes! We know messages can be costly, so just limit the user to 1 message.

Do I need an Open AI account?

Yes, you need an open AI account and API key which can be accessed here.