# Adding Maker to your site

***

### Squarespace

#### Embed on a single page

1. Edit the target page → hover and click **➕ Add Block**.
2. Select **Code**, set **HTML** mode.
3. Paste your Maker `<script>` → **Apply** → **Save**. [Squarespace Help](https://support.squarespace.com/hc/en-us/articles/205815928-Adding-custom-code-to-your-site?utm_source=chatgpt.com)

#### Site-wide load

1. **Settings → Advanced → Code Injection**.
2. Paste the script in **Header** (or **Footer**) field.
3. Click **Save**. It now runs on every page. [Squarespace Help](https://support.squarespace.com/hc/en-us/articles/205815908-Using-code-injection?utm_source=chatgpt.com)

<figure><img src="https://16034713-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FM2xSzN6C9hL2ozNM8Yx0%2Fuploads%2F2huTUppwPKwd4DfXODHr%2Fsquarespace_code_injection_arrow%20(1).png?alt=media&#x26;token=3e6c4eff-0642-4a3d-b7e7-33695c016bb7" alt=""><figcaption></figcaption></figure>

***

### Wix

#### Embed in a specific section

1. In the **Editor**, click **Add (+) → Embed → Embed HTML**.
2. Drag the frame where Maker should appear, then **Enter Code**.
3. Paste the script → **Update** → **Publish**. [Wix Support Center](https://support.wix.com/en/article/wix-editor-embedding-custom-code-on-your-site?utm_source=chatgpt.com)

#### Global or selected pages

1. From your **Dashboard**, go to **Settings → Custom Code**.
2. Click **+ Add Custom Code**.
3. Paste the script, name it, choose **All pages** or specific pages & location (Head / Body), then **Apply**. [Wix Support Center+1](https://support.wix.com/en/article/wix-editor-embedding-custom-code-on-your-site?utm_source=chatgpt.com)

<figure><img src="https://16034713-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FM2xSzN6C9hL2ozNM8Yx0%2Fuploads%2FXLmqnVDlyLL5u59fvTpj%2Fwix_embed_arrow_full.png?alt=media&#x26;token=c090d7b8-d6f6-49c3-ae2d-c1eeaf3c9e93" alt=""><figcaption></figcaption></figure>

***

### Webflow

#### Exact spot in a design

1. Open **Designer → Add panel**.
2. Drag an **Embed** element onto the canvas.
3. Paste the Maker `<script>` → **Save & Close** → **Publish**. [help.webflow.com](https://help.webflow.com/hc/en-us/articles/33961332238611-Custom-code-embed?utm_source=chatgpt.com)

#### Template-wide or site-wide

*Page only:* **Pages panel → ⚙ Page Settings → Custom Code** → paste in **Head** or **Before \</body>** → **Save**.\
\&#xNAN;*Entire site:* **Site Settings → Custom Code** → paste in **Head** or **Footer** → **Publish**. [help.webflow.com](https://help.webflow.com/hc/en-us/articles/33961332238611-Custom-code-embed?utm_source=chatgpt.com)

<figure><img src="https://16034713-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FM2xSzN6C9hL2ozNM8Yx0%2Fuploads%2FjwHEtQTVlQXPnGuDbYZy%2Fwebflow_embed_custom_code_arrow.png?alt=media&#x26;token=13264802-7503-465e-9606-db4ef9de837a" alt=""><figcaption></figcaption></figure>

***

### WooCommerce (WordPress)

#### Single product or page

1. Edit the product/page in Gutenberg.
2. Click **➕ → Custom HTML** block.
3. Paste the script → **Preview** → **Update/Publish**.

#### Theme-wide

1. **Appearance → Editor** (or header-footer plugin).
2. Paste the script in `header.php`, `footer.php`, or a global template part → **Save**. *(Requires admin permissions.)*

<figure><img src="https://16034713-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FM2xSzN6C9hL2ozNM8Yx0%2Fuploads%2FI1iuAJT03wjyTf52PIuo%2Fwoocommerce_embed_arrow.png?alt=media&#x26;token=e58c9149-fc6d-4cb7-b2aa-ed6c40c1fcee" alt=""><figcaption></figcaption></figure>

***

### Shopify

#### Exact placement on a template

1. **Online Store → Themes → Customize**.
2. Open the template (e.g., *Products*).
3. **Add block/section → Custom liquid** → paste the script → **Save**. [Shopify Help Center](https://help.shopify.com/en/manual/online-store/themes/theme-structure/sections-and-blocks?utm_source=chatgpt.com)

#### Site-wide

1. **… → Edit code**.
2. Open `layout/theme.liquid` (or the relevant template).
3. Paste the script before `</body>` → **Save**. [Shopify Help Center](https://help.shopify.com/en/manual/online-store/themes/theme-structure/sections-and-blocks?utm_source=chatgpt.com)

<figure><img src="https://16034713-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FM2xSzN6C9hL2ozNM8Yx0%2Fuploads%2F5DUecIP8EFbVg7yvHIzO%2Fshopify_embed_arrow.png?alt=media&#x26;token=9fdc6332-bb92-4490-bd58-f96f8cefafa7" alt=""><figcaption></figcaption></figure>

***

### BigCommerce

#### One page only

1. **Storefront → Web Pages** → edit the page.
2. Switch to **HTML** view.
3. Paste the script → **Save**. [BigCommerce Support](https://support.bigcommerce.com/s/article/Using-Script-Manager?utm_source=chatgpt.com)

#### All or selected pages

1. **Storefront → Script Manager → Create a Script**.
2. Fill **Name**, choose **Location** (Header/Footer), **Pages**, **Script Type: Script**.
3. Paste the script → **Save/Enable**. [BigCommerce Support](https://support.bigcommerce.com/s/article/Using-Script-Manager?utm_source=chatgpt.com)

<figure><img src="https://16034713-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FM2xSzN6C9hL2ozNM8Yx0%2Fuploads%2FaFun0GRoyDtGTvRqKQqz%2FBigcommerce.png?alt=media&#x26;token=a9474a5b-0d81-4ed3-a530-5b0f08a91ee5" alt=""><figcaption></figcaption></figure>

***

### Magento / Adobe Commerce

#### Page Builder block

1. In Admin, edit the Page/Block/Category → **Edit with Page Builder**.
2. In **Elements**, drag **HTML Code** onto the canvas.
3. Paste the script → **Save** (clear cache). [Experience League](https://experienceleague.adobe.com/en/docs/commerce-admin/page-builder/elements/html-code?utm_source=chatgpt.com)

#### Reusable block

1. **Content → Elements → Blocks → Add New Block**.
2. Add an **HTML Code** element with the script → **Save**.
3. Place that block anywhere via Page Builder. [Experience League](https://experienceleague.adobe.com/en/docs/commerce-admin/page-builder/elements/html-code?utm_source=chatgpt.com)

<figure><img src="https://16034713-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FM2xSzN6C9hL2ozNM8Yx0%2Fuploads%2FWlc1BzK1LxAP8nZIiaXc%2Fmagento.png?alt=media&#x26;token=ac4c250b-e892-4462-b98b-78b00ea585f0" alt=""><figcaption></figcaption></figure>

***

### HubSpot CMS (new)

#### Site-wide header or footer

1. **Settings → Website → Pages**.
2. Open **Site Header HTML** (or **Site Footer HTML**).
3. Paste the script → **Save**. [HubSpot Knowledge Base](https://knowledge.hubspot.com/website-and-landing-pages/use-code-snippets-with-hubspot-content?utm_source=chatgpt.com)

#### Within a template

1. **Marketing → Files & Templates → Design Tools**.
2. Edit a theme/template; drag a **Custom HTML** module where Maker should appear.
3. Paste the script → **Publish** template. [HubSpot Knowledge Base](https://knowledge.hubspot.com/website-and-landing-pages/use-code-snippets-with-hubspot-content?utm_source=chatgpt.com)

<figure><img src="https://16034713-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FM2xSzN6C9hL2ozNM8Yx0%2Fuploads%2FP6J3uxfu7KjwFU2pnSbG%2Fhubspot_header_html_arrow.png?alt=media&#x26;token=9c622e24-06b5-4ecc-b692-193157d185dd" alt=""><figcaption></figcaption></figure>

### How do I make my Maker content load faster?

Paste one small block of code into the page **head** and publish. Copy‑paste this (everything goes inside `<head>`)

```
<!-- Very top of <head>: warm up & preload -->
<link rel="dns-prefetch" href="//aicdn.maker.co">
<link rel="preconnect" href="https://aicdn.maker.co" crossorigin>
</script>
```

#### Where to paste this code on different platforms?

#### Squarespace (7.0/7.1)

* **Site‑wide:** **Settings → Advanced → Code Injection → Header** → paste the whole block → **Save** → **Publish**.
* **Single page:** Open the page → **Settings → Advanced → Header** → paste → **Save**.

> Requires a Business/Commerce plan for Code Injection.

#### Wix

* **Dashboard → Settings → Custom Code → Add Custom Code** → paste → **Place Code in:** *Head* → **All pages** (or select pages) → **Apply** → **Publish**.

#### Webflow

* **Project Settings → Custom Code → Head Code** → paste → **Save** → **Publish**.
* Per‑page: **Page Settings → Inside head tag** → paste → **Publish**.

#### WooCommerce (WordPress)

* Easiest: install **“Insert Headers and Footers” (WPCode)** plugin → **Code Snippets → Header** → paste → **Save**.
* Or theme edit: **Appearance → Theme File Editor → header.php** → paste inside `<head>` → **Update file**.

> Make sure caching/CDN is cleared (e.g., WP Rocket, Cloudflare).

#### Shopify (Online Store 2.0)

* **Online Store → Themes → Edit code → layout/theme.liquid** → find `<head>` → paste the block **just after `<head>`** → **Save** → **Preview/Publish**.

#### BigCommerce (Stencil)

* **Storefront → Themes → Advanced → Edit Theme Files** → open `templates/layout/base.html` (or the head partial, e.g., `templates/components/common/html-head.html`) → paste inside `<head>` → **Save** → **Preview/Publish**.

> If you prefer not to edit files, you can add only the `<script>` via **Storefront → Script Manager** (Location: *Head*). The three `<link>` tags usually require theme file edit.

#### Magento / Adobe Commerce (Magento 2)

* **Admin → Content → Design → Configuration** → choose your **Store View → Edit** → **HTML Head → Scripts and Style Sheets** → paste → **Save Configuration** → **Flush Cache**.

#### HubSpot CMS

* **Settings → Website → Pages → (choose domain) → Templates → Site header HTML** → paste → **Save** → **Publish**.
* Or edit your theme in **Design Manager** and add the block to the global header partial.

***