Skip to content
Start free trial
All articles

Install the ZolAi widget with one line of code, and show your products as cards

Add ZolAi to your site by pasting one line of code, then connect a product or service feed so the agent can recommend items as cards with a picture, a price and a link.

4 min read

By Abdallah Mohamed

Read this article in Arabic

Once your agent knows your content, it needs a place to talk to your visitors. ZolAi runs on your site as a chat window that you add with a single line of code. This article covers installing it, making it match your site, and connecting your catalog so the agent can show your products and services as cards.

One line of code

In your agent's settings, the Install section shows your embed code. It is one script tag that carries your agent's public key, and it looks like this:

<script src="…/widget.js" data-agent="pk_…" async></script>

Copy it from your dashboard, where it already includes your key, and paste it before the closing </body> tag on every page of your site. That is all: there is nothing else to install, and no developer is needed.

Which sites it works on

The widget works on any website or platform that lets you add your own code to its pages, whether it is a site you built yourself or a store or site builder with a custom code option. If your platform lets you add a script to your pages or your theme, you can add ZolAi.

The Install section also tells you whether the widget has loaded yet, and on which site, so you can confirm the installation worked.

Light, isolated, and on your domains only

  • It does not slow your site down. The script loads after your page and never holds it up.

  • It does not clash with your design. The chat window runs in its own isolated layer, so your site's styles do not affect it, and its styles do not affect your site.

  • It runs only where you allow it. Under Allowed sites, list your domains (their subdomains are included) and nobody else can use your agent. Until you add one, the widget loads on any site, and your dashboard reminds you to set it.

  • It is comfortable on phones. On small screens, the chat opens full screen.

Make it look like your site

In the Appearance settings, choose the color, the corner the launcher sits in, the launcher icon (or upload your own), and the chat layout. Add a welcome message and up to four suggested questions that visitors can tap to start. You see the result in a live preview before it goes out.

Show products and services as cards

Answering questions is one thing; helping a visitor choose is another. With a catalog connected, when a visitor wants to buy, book or choose something, or asks about an item's price or stock, the agent searches your catalog and shows up to four cards under its reply. A card can show the item's picture, name, price and stock, with a View link to its page.

The catalog comes from one feed link per agent:

  • A Google Merchant or Meta catalog feed, which platforms such as Shopify, WooCommerce, Salla and Zid can export.

  • A CSV file, for example a Google Sheet published to the web as CSV. This suits clinics, training centers and other businesses that offer services rather than products.

Only the name is required. Description, price, currency, image, link, availability and category are read when they are there, and column names can be in English or Arabic. A catalog holds up to 5,000 items per agent. It syncs every six hours, and you can press Sync now after a change.

Before you save, you can test the feed link: ZolAi reads the first few items and shows you what it found, so you can fix a wrong link or column before the first sync. A common mistake is pasting the link of the sheet's page instead of its published CSV link.

Cards are saved with the reply itself, so a conversation looks the same later even if prices change or an item leaves the feed. Their links carry utm_source=zolai, so your site's analytics can show the visits that came from the chat.

The agent mentions only the items, prices and stock that its catalog search returned. It never invents a product or guesses a price, and when nothing matches, it says so.

A quick checklist before launch

  1. Add your content and check the answers in the test chat.

  2. Set up the appearance and the welcome message.

  3. Add your domains under Allowed sites.

  4. Paste the embed code on every page of your site.

  5. Connect your product or service feed, if you have one.

  6. Open your site, ask a question, and watch the conversation arrive in your Inbox.

More articles