How to create a customized AI Agent Chatbot on Wix in a few simple steps

Step-by-step guide to:

• Build an customized AI agent that is trained with the knowledge you provide.

• Publishing the AI agent to a Wix website, serving its audience

By following the steps, you will be able to onboard the most advanced AI Agent chatbot to your website, which is able to greet and answer questions to your website guest. No coding skill needed. Let's get started.

Step 1: 📢 Log In

Sign up with AgentX and log in to your account. AgentX offers a free plan which does not require credit card 💳!

Step 2: 📢 Open the “Build” Page

After log in, navigate to top left and click the second icon from top to bring up the “Build” page.

Step 3: 📢 Click the Purple + Button and Start to Create a New AI Agent

🔸 Configure the agent avatar, name, creator name, creativity level, agent bio, greeting message, and response instruction. Hover to any exclamation mark for hints or explanations.

🔸 Pick the AI model powering your AI chat agent. Popular models include ChatGPT 4, Google Gemini, Claude 3 Haiku, Sonnet, and Opus.

‍

Step 4: 📢 Train Your AI Chat Agent with Knowledge

To impart domain knowledge to your AI chat agent, AgentX provides 4 ways.

I. Onboarding Info

🔸 Your agent will always remember onboarding info when answering each question. For example, the onboarding info may include the key information of your company.

🔸 You may also specify some simple logic for your agent. For example, you can enter: [First Title] step 1 [First Content] After greeting, ask user for zip code in the US and when receiving an answer proceed to step 2; [Second Title] step 2 [Second Content] provide the name of the city corresponding to the zip code.

🔸 After entering texts, remember to click “Add Info” to complete the addition.

‍

II. Document Knowledge

🔸 Upload files like WORD, PDF, Image, or Txt to train your AI chat agent. After choosing each file, remember to click “Upload Document” to complete the upload.

III. Website Knowledge

🔸 Train your AI chat agent with knowledge from web pages. Remember to click “Add links”.

🔸 Single Webpage: Input a specific webpage’s content

🔸 Sitemap: Use a website's sitemap (usually in the form of https://www.example.com/sitemap.xml) to capture URLs of the website

🔸 Find Sublinks: Enter a website address and set the depth to explore and learn from recurring links on the site. You may choose a “depth” up to value 3  For example, setting “depth” to a value of 2 means capturing the primary web page of the root link and secondary web pages linked to the primary page.

🔸 Website knowledge refresh option is available to capture updates to the webpages.

IV. FAQ Knowledge

🔸 You may enter frequently asked questions and answers and click “Add Questions” for each pair. This is a preferred option for great accuracy,

‍

Step 5: 📢 Create Your AI Chat Agent

I. You can skip the Action tab for now and click “Create agent” and your AI chat agent will be born in a few moments, depending on the size of the knowledge imparted.

II. 🏈 After a successful build, you will see an interface like below, showing a test chat window on the right. Try chatting with your agent. You can share your agent or chat conversations by clicking the top right icons. Update any setting before publish.

Congratulations 🎉🥳, you have built your AI Agent Chatbot! Now it comes to the easy part.

Step 6: Deploy - Copy JavaScript Embedding Code Provided by AgentX

Under the “Deploy” page,  toggle “Enable” for “Website Embedding”. Find short piece of code, as shown below, under the “Embed” and click “Copy”.

🐧 Now you are done with AgentX, and please navigate to your Wix account to complete the rest

Step 7: Remove Pre-installed Chatbots

Make sure there is no pre-installed chatbot on your website. Obviously, you don’t want to have chatbots stacking up on each other. Typically, you can remove pre-installed chat bots from your Wix Dashboard under Apps → Manage Apps → Delete‍‍

Step 8: Navigate to “Custom Code”

Still from the Wix Dashboard, click “Settings” from the left and scroll down to the bottom to find “</> Custom Code” and click on it.

If you have not already done so, Wix requires upgrade to payment plan and connection to a domain before allowing you to use this “Custom Code” function.

‍

Step 9: Click the Middle “Add Code” Block

As you can see below, Wix allows custom code insertion at three different places: (1) in “Head” (2) in “Body - Start” and (3) in “Body - End”. Remember that your AI agent chatbot’s JavaScript code copied from AgentX needs to be inserted between the “Body - Start” and “Body - End”. Thus, click on the “Add Code” link in the middle.

Step 10: Paste the Copied JavaScript Code

Paste the copied JavaScript code into the first textbox and click “Apply”. Now it is pretty much done.

The custom code will show as enabled.

Visit Your Website to Watch Your AI Agent Chatbot in Action 😍

Congrats 🎉🥳 You have successfully published your AI Agent Chatbot on your Wix website!

Still having questions or comments ?  Leave us a message here. Happy to onboard your business by phone, video, or email. Our dedicated support team is always available to assist you with any issue !