> For the complete documentation index, see [llms.txt](https://docs.maker.co/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.maker.co/maker-greatstore/get-started/installation/wordpress.md).

# WordPress

Add GreatStore to a WordPress site, with a block theme or a classic theme.

This guide is for self-hosted WordPress **6.3 or later**, and for WordPress.com sites on a plan that allows plugins. It covers both kinds of WordPress theme:

* **Block themes**: edited in **Appearance → Editor**. Twenty Twenty-Two and every default theme since, plus most themes built for the Site Editor.
* **Classic themes**: edited through **Appearance → Customize**, **Widgets**, and **Menus**. Twenty Twenty-One and earlier, and many established commercial themes.

Running a WooCommerce shop? Follow [WooCommerce](/maker-greatstore/get-started/installation/woocommerce.md) instead; it builds on this page with product-page steps.

## Add the script

Pick whichever route suits you; both work with either kind of theme.

{% tabs %}
{% tab title="With a plugin (no code)" %}
{% stepper %}
{% step %}

#### Install WPCode

Go to **Plugins → Add New Plugin**, search for **WPCode**, then install and activate it.
{% endstep %}

{% step %}

#### Open the header box

Go to **Code Snippets → Header & Footer**.
{% endstep %}

{% step %}

#### Paste the script into Header

```html
<script src="https://{your-address}.greatstore.ai/embed.js" async></script>
```

Click **Save Changes**.
{% endstep %}
{% endstepper %}
{% endtab %}

{% tab title="In your theme's code" %}
Add this to your **child theme's** `functions.php`. Editing the parent theme directly works too, but a theme update will wipe the change.

```php
add_action( 'wp_enqueue_scripts', function () {
	wp_enqueue_script(
		'greatstore',
		'https://{your-address}.greatstore.ai/embed.js',
		array(),
		null,
		array( 'strategy' => 'async' )
	);
} );
```

The `strategy` option needs WordPress 6.3 or later.
{% endtab %}
{% endtabs %}

## Add a way to open the chat

The easiest trigger in WordPress is a link: any menu item or button that points at `#chat` can open the assistant. Add this once, in the **Footer** box of **Code Snippets → Header & Footer**:

```html
<script>
  document.addEventListener('click', function (event) {
    var trigger = event.target.closest('a[href$="#chat"]');
    if (!trigger || !window.GreatStore) return;
    event.preventDefault();
    GreatStore.open();
  });
</script>
```

Then create the link itself.

### Block themes

{% stepper %}
{% step %}

#### Open the header

Go to **Appearance → Editor → Patterns → Header** (on some versions, **Template Parts → Header**).
{% endstep %}

{% step %}

#### Add the link

Add a **Custom Link** to the **Navigation** block, or a **Buttons** block, and set its link to `#chat`. Label it something like "Chat with us".
{% endstep %}

{% step %}

#### Save

Click **Save**. The link works anywhere else too: in a page's content, a footer, or a sidebar.
{% endstep %}
{% endstepper %}

### Classic themes

{% stepper %}
{% step %}

#### Open your menus

Go to **Appearance → Menus** and select your main menu.
{% endstep %}

{% step %}

#### Add a custom link

Under **Custom Links**, set the URL to `#chat` and the link text to "Chat with us", then **Add to Menu**.
{% endstep %}

{% step %}

#### Save

Click **Save Menu**. For a button inside a page or widget area, add a **Custom HTML** block with `<a href="#chat">Chat with us</a>`.
{% endstep %}
{% endstepper %}

## Staging and preview sites

The chat works on the **Website** address set under **Configure → Basic**. A staging copy of your site (from your host, or a plugin like WP Staging) has its own address, so add it under [Embed origins](/maker-greatstore/configure/security.md#embed-origins) before testing there.

## Troubleshooting

<details>

<summary>Nothing happens after adding the script</summary>

Clear your site's page cache: caching plugins and hosts often keep serving the page as it was before you added the script. Then open your browser's developer console. If you see **"Chat is unavailable on …"**, add that address under [Embed origins](/maker-greatstore/configure/security.md#embed-origins).

</details>

<details>

<summary>The chat only opens on the second click, or only after scrolling</summary>

Some speed plugins hold back scripts until a visitor interacts with the page: **Delay JavaScript execution** in WP Rocket, **Load JS Deferred / Delay** in LiteSpeed Cache, and similar options in Perfmatters, Autoptimize, and Cloudflare's Rocket Loader. Add `greatstore.ai` to that feature's exclusion list, then clear the cache.

</details>

<details>

<summary>My `#chat` link jumps to the top of the page instead</summary>

The footer snippet isn't on the page. Check it's saved in the **Footer** box (not **Body**), and that no caching plugin is serving an older copy.

</details>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.maker.co/maker-greatstore/get-started/installation/wordpress.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.