Install guide

Everything about the one line you paste

Drape is installed by pasting one tag into your site. This page covers the tag, where it goes on the common platforms, how to move it clear of other buttons, the small JavaScript API, and what to allow if you run a strict Content Security Policy.

1. The tag

<script src="https://s3.drape.ng/public/drape-loader.js?retailer_id=YOUR_RETAILER_ID" async></script>

Replace YOUR_RETAILER_ID with the id we sent you. The async attribute matters: it means the tag never blocks your page from rendering. Paste it once, ideally just before </body>. It is safe on every page, including checkout, and it is safe if it accidentally ends up on a page twice.

2. Parameters

Name	Required	What it does
`retailer_id`	Yes	Which catalogue Drape styles from. Without it the tag logs an error and draws nothing.
`bottom`	No	Pixels between the button and the bottom of the screen. Default `20`.
`right`	No	Pixels between the button and the right edge. Default `20`.
`teaser`	No	Set to `0` to skip the welcome note beside the button. Shown by default until the shopper dismisses it.

3. Where to paste it

WordPress and WooCommerce: Appearance → Theme File Editor → footer.php, before </body>. If you would rather not edit theme files, any “insert headers and footers” plugin works; put the tag in the footer slot.
Shopify: Online Store → Themes → Edit code → layout/theme.liquid, before </body>. Shopify's checkout pages don't run theme scripts, so Drape won't show on checkout, which is fine.
Wix, Squarespace, Webflow: Use the site-wide custom code setting and choose the footer or “end of body” placement.
Hand-built sites: Put it in your base template so it renders on every page.

4. Positioning next to other buttons

Most stores already have something in the bottom right corner: a WhatsApp button, a back-to-top arrow, a cookie bar. Pass bottom and right to move Drape clear of it. If you have a 56px WhatsApp button 30px from each edge, Drape sits directly above it with:

<script src="https://s3.drape.ng/public/drape-loader.js?retailer_id=YOUR_RETAILER_ID&bottom=100&right=30" async></script>

The welcome note and the open panel follow the button, so you only set the numbers once. On phones the panel fills the screen regardless.

5. JavaScript API

Once the tag has run, window.chatWidget is available. Use it to open Drape from your own links, for example a “Not sure what to wear?” link on a product page.

chatWidget.open()    // open the panel
chatWidget.close()   // close it
chatWidget.toggle()  // one or the other
chatWidget.hide()    // remove the button from the page
chatWidget.show()    // bring it back

<a href="#" onclick="chatWidget.open(); return false;">Ask the stylist</a>

6. Content Security Policy

If your site sets a CSP, allow these origins. Nothing else is contacted from the shopper's browser.

Directive	Origin	Why
`script-src`	`https://s3.drape.ng`	The loader itself.
`frame-src`	`https://app.drape.ng`	The panel is a frame from here.
`connect-src`	`https://styling.drape.coolify.axiom.ng`	Only needed if your CSP also governs the frame. The panel talks to the AI stylist here.

The button and note are drawn inside a shadow root with inline styles only, so no style-src allowance is needed.

7. If something looks wrong

Nothing appears: Open the browser console. [drape] No retailer_id found means the parameter is missing from the tag. No message at all usually means the tag is not on the page: view source and search for drape-loader.
The panel opens but stays on “Loading”: Your site blocks frames from other origins. Add the frame-src allowance above.
It sits on top of another button: Set bottom and right. See section 4.
Anything else: Email [email protected] with your store URL and we'll look at it on your live site.

See it on your own products.

Put Drape on my store