How to Add an Alibaba Cloud AI Chatbot to Your WordPress Site

Launch your chatbot assistant

First, we need to set up the chatbot in the cloud. Think of this as hiring your new digital assistant and giving them a desk to work from.

1. Log in to your Alibaba Cloud Console (the online control room where you manage all your cloud services).
2. Use the search bar at the top to search for "Chatbot" or "Model Studio" and select it.
3. Look for a button that says Create Robot or New Instance to begin.
4. Give your chatbot a friendly name that represents your business, such as "Front Desk Helper".

Customise your welcome message

Now, we want to teach your chatbot how to greet people. This is the very first text a visitor will see when they click the chat bubble on your website.

1. Inside your chatbot settings, locate the section labelled Greetings or Welcome Messages.
2. Write a clear, warm message that tells visitors what the bot can do.

"Hi there! Welcome to [Your Business Name]. I am your digital assistant. Ask me about our opening hours, services, or how to book an appointment!"

Match the design to your brand

You want the chat bubble to look like it belongs on your website, not like a random pop-up.

1. Find the Customisation or Style tab in the chatbot panel.
2. Choose a theme colour (using your brand’s primary colour) that matches your existing website layout.
3. Upload a small logo or a friendly icon to serve as your chatbot's profile picture.
4. Choose where the chat bubble should sit on your screen—usually, the bottom right-hand corner is best, as this is where most web users expect to find help.

Copy your chatbot widget code

To connect your new chatbot to WordPress, we need to grab a tiny piece of HTML code (a snippet of web instructions that tells your website to display the chat window).

1. Once you are happy with your settings, click the Publish or Deploy button.
2. Look for a section called Embed Code or Web Widget.
3. You will see a small box of code starting with <script>. Click Copy to save this code to your computer's clipboard.

Paste the code into WordPress

Now, we will paste that code into WordPress. We will do this by putting it in your website's "footer," which is the very bottom section of your site that appears on every single page.

1. Log in to your WordPress dashboard.
2. In the left-hand menu, go to Appearance and then Widgets (or use a free plugin like "Insert Headers and Footers" if you prefer an easier layout).
3. Add a Custom HTML block to your footer area.
4. Paste the code you copied from Alibaba Cloud into this block.
5. Click Update or Save at the top right of your WordPress screen.