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

Create a new chatbot instance

Open your web browser, go to console.alibabacloud.com and sign in. In the console’s top‑right search bar type “Chatbot” and press Enter; you’ll see a list of AI services. Click the button that says Create Robot (or a similar button like Create Instance). A form appears asking for a name and a brief description. After you type a name such as “FrontDeskHelper” and hit Create, the platform spins up a new bot and shows it in a table with a status of “Running”. If you don’t see a “Create Robot” button, look for a plus‑shaped icon or a menu labelled New Bot.

You’ll know it worked when the new entry appears in the list with a green dot or the word “Running”.

Define the chatbot’s welcome greeting

In the list of bots, click the name of the bot you just created to open its settings page. On the left‑hand menu you’ll find a section called Greetings (sometimes labelled Welcome Message). Inside, there’s a text box where you can type the first thing the bot says to visitors. After you type a sentence like “Hi! I’m your digital assistant – ask me about opening hours or services,” a preview of the message appears below the box. Click Save to store the change. If the menu says “Chat Prompt” instead of Greetings, that’s the same field – just look for a large text area.

You’ll know it worked when the preview box shows exactly the text you entered and a confirmation banner appears.

Choose a visual style that matches your site

While still in the bot’s settings, switch to the Appearance, Style, or Customization tab – the label can vary, but it usually contains a colour palette and an icon uploader. Pick a colour that mirrors your site’s primary hue (you can copy the hex code, e.g., #0066CC) and upload a small logo (a 100 × 100 pixel PNG works well). The preview on the right updates to show a chat bubble in the chosen colour and with your logo as the avatar. If you cannot find a colour picker, look for a gear ⚙️ icon that opens “Theme Settings”.

You’ll know it worked when the on‑screen bubble in the preview reflects the colour and icon you selected.

Copy the widget embed code

Return to the main bot page and press the Publish or Deploy button – this tells Alibaba Cloud to make the bot publicly reachable. A new panel labelled Embed Code, Web Widget, or similar will slide out, containing a snippet that starts with <script src="..."></script>. Click the Copy button next to the box; the code is now on your computer’s clipboard. If there is no Copy button, click inside the box, press Ctrl + C (or Cmd + C on a Mac) to copy it manually.

You’ll know it worked when you can paste the snippet into a plain‑text document and see the full <script> tag appear.

Insert the code into WordPress footer

Log into your WordPress dashboard (your‑site.com/wp‑admin). In the left‑hand menu go to Appearance → Widgets. Locate the widget area called Footer (or “Footer 1” etc.). Click Add a Block, choose Custom HTML, then paste the code you copied into the block’s text area. Press the Update or Save button at the top of the screen. The site now loads the script on every page, and a chat bubble should appear in the bottom‑right corner when you view the front‑end. If you don’t see a Footer widget area, install the free plugin “Insert Headers and Footers”, then go to Settings → Insert Headers and Footers, paste the code into the “Scripts in Footer” box, and save.