AstroAPI

Appearance

Adding Widgets to Your Website ​

This guide shows you how to add an AstroAPI widget or chatbot to your website — no programming knowledge required. You copy one snippet of code from your dashboard and paste it into your website builder.

It covers step-by-step instructions for WordPress, Wix, Squarespace, Shopify and Webflow, plus a generic method that works on any website.

Looking for the technical widget API?

This guide is about pasting a ready-made embed code into your site. For creating and configuring widgets via the API, see Embeddable Widgets. For the chatbot API, see AI Chatbot.

Step 1: Get Your Embed Code ​

  1. Log in to the AstroAPI dashboard.
  2. Go to Widgets (or Chatbots for the AI chatbot) and open the widget you want to embed.
  3. Use the Preview tab to check that it looks the way you want. Colors, fonts and layout are configured here in the dashboard — not in the code — so you can restyle the widget later without touching your website.
  4. Open the Embed tab and copy the embed code. It looks something like this:
html
<script
  src="https://api.astroapi.cloud/widgets/sdk.js"
  data-widget-id="wgt_abc123"
  data-api-key="your-api-key"
  data-api-url="https://api.astroapi.cloud"
></script>
<div id="astro-widget-wgt_abc123"></div>

The chatbot embed code is a single script tag without the <div>:

html
<script
  src="https://api.astroapi.cloud/widget.js"
  data-chatbot-id="your-chatbot-id"
  data-api-key="your-api-key"
></script>

That's the only code you need. The following sections show where to paste it, per platform.

Keep your API key safe

The embed code contains an API key. Use a key that only has widget or chatbot permissions — never your main API key. You can create restricted keys under API Keys in the dashboard, and restrict the chatbot to your own domains under Chatbots → Security.

WordPress ​

  1. Edit the page or post where the widget should appear.
  2. Click the + button to add a block and search for Custom HTML.
  3. Paste the embed code into the block.
  4. Click Preview to check the result, then Update or Publish.

Option B: Site-wide (for the chatbot) ​

To show the chatbot on every page:

  1. Install a lightweight header/footer plugin such as WPCode, or use your theme's "custom scripts" option — no theme file editing needed.
  2. Paste the chatbot embed code into the Footer (before </body>) section.
  3. Save. The chatbot bubble now appears on every page.

Elementor

Using Elementor? Add an HTML widget to your page and paste the embed code there.

Wix ​

  1. In the Wix editor, click Add Elements (the + button) in the left sidebar.
  2. Choose Embed Code → Embed HTML.
  3. Click Enter Code and paste the embed code.
  4. Click Apply and drag/resize the frame to fit the widget.
  5. Click Publish.

Chatbot on Wix

Wix renders embedded HTML inside a frame, which confines the chatbot bubble to that frame. For a site-wide chatbot, use Settings → Custom Code instead (requires a paid Wix plan): paste the chatbot embed code and set it to load on All pages, placed in the Body - end.

Squarespace ​

  1. Edit the page where the widget should appear.
  2. Click an insert point and choose the Code block.
  3. Paste the embed code (keep the default HTML mode).
  4. Save the page.

For a site-wide chatbot, go to Settings → Advanced → Code Injection and paste the chatbot embed code into the Footer field.

WARNING

Code blocks and code injection require a Squarespace Business plan or higher.

Shopify ​

  1. In the Shopify admin, go to Online Store → Themes.
  2. Click Customize on your current theme.
  3. Add a Custom Liquid section (or an HTML block, depending on your theme) to the page where the widget should appear.
  4. Paste the embed code and click Save.

For a site-wide chatbot:

  1. Go to Online Store → Themes → ⋯ → Edit code.
  2. Open layout/theme.liquid.
  3. Paste the chatbot embed code just before the closing </body> tag.
  4. Click Save.

Webflow ​

  1. In the Webflow designer, drag an Embed element (from Add Elements → Components) onto your page.
  2. Paste the embed code into the code editor and click Save & Close.
  3. Publish your site. Custom code only runs on the published site, not inside the designer preview.

For a site-wide chatbot, go to Site Settings → Custom Code and paste the chatbot embed code into the Footer Code field.

WARNING

Custom code in Webflow requires a paid site plan.

Any Other Website ​

If you (or your web developer) manage the HTML directly:

  1. Open the HTML file or template of the page.
  2. Paste the widget embed code where the widget should appear in the page.
  3. For the chatbot, paste its embed code just before the closing </body> tag — it renders as a floating bubble, so its position in the HTML doesn't matter.

Troubleshooting ​

The widget area stays empty. Check that both parts of the embed code were pasted: the <script> tag and the <div> below it. Some page builders strip one of the two.

"Invalid API key" or nothing loads. The API key in the embed code may have been revoked or lacks the right permissions. Copy a fresh embed code from the dashboard's Embed tab.

The chatbot doesn't appear on my published site. If you restricted the chatbot to specific domains (Chatbots → Security → Allowed domains), make sure your website's domain is on the list — including the www. variant if your site uses it.

The widget looks different from the preview. Styling comes from the dashboard configuration and loads with the widget. If you changed the design recently, hard-refresh the page (Ctrl+Shift+R / Cmd+Shift+R) to bypass your browser cache.

It works on desktop but not in my app's webview. The embed code needs to run JavaScript from astroapi.cloud. Make sure your app or site's security policy (CSP) allows scripts from that domain.

Next Steps ​

AstroAPI Documentation

Copyright © 2026 AstroAPI