# Website Setup for App Marketing Widgets

The **App Install Banner** and **Floating Button** can be displayed on your website by adding a small script provided in the Twinr Builder.\
This script enables the App Marketing Widgets to load on your site and apply all the rules you configured.

<p align="center"><img src="/files/in6hkyWBAmzBHPlw6ATZ" alt="" data-size="original"></p>

## <mark style="color:green;">How It Works</mark>

### **1. Copy the Embed Code**

1. Go to **App Marketing Widgets → Embed Code** in Twinr Builder.
2. Click **Copy Script** to copy the generated code.

> The script is unique to your app and loads all active App Marketing Widgets.

### **2.  Add the Script to Your Website**

Paste the script inside your website’s **`<body>` tag**.\
For example:

```html
<body>
    <!-- Your website content -->

    <!-- Twinr App Marketing Widget -->
    <script>
        // script copied from Twinr Builder
    </script>
</body>
```

> 💡 The script must be placed inside `<body>` (not in `<head>`).

## <mark style="color:green;">Platform - Specific Website</mark>

### 🛍️ **Shopify**

#### **Option A — Add Script to All Pages**

1. Open **Shopify Admin**
2. Go to **Online Store → Themes**
3. Click **Edit Code**
4. Open:

   ```
   theme.liquid
   ```
5. Scroll to the **bottom** and paste the script **just before the closing `</body>` tag**.

Example:

```liquid
<!-- Twinr App Marketing Widget -->
<script>
   // paste your script here
</script>
</body>
```

6. Click **Save**

***

#### **Option B — Add Only to Specific Pages**

You may also paste the script inside templates like:

* `product.liquid`
* `collection.liquid`
* `page.liquid`

Paste it before `</body>`.

***

### 🌐 **WordPress**

#### **Option A — Using Theme Editor**

1. Go to **WordPress Admin**
2. Navigate to: **Appearance → Theme File Editor**
3. Open:

   ```
   footer.php
   ```
4. Paste your script **above the closing `</body>` tag**:

```php
<!-- Twinr App Marketing Widget -->
<script>
// paste script here
</script>
</body>
```

5. Save changes.

***

#### **Option B — Using Code Snippet Plugin**

You can use plugins like **Insert Headers & Footers** or **Code Snippets**:

1. Install plugin
2. Add a new snippet
3. Set it to run in the **Footer**
4. Paste your script
5. Save

***

### 💻 **Custom HTML Website**

1. Open your project files
2. Locate your main HTML file (often `index.html`)
3. Paste the script **inside the `<body>` tag**, usually at the bottom:

```html
<body>

   <!-- Your website code -->

   <!-- Twinr App Marketing Widget -->
   <script>
      // paste script here
   </script>

</body>
```

4. Save and publish your site

***

## <mark style="color:green;">✔️ Verify Installation</mark>

After installing:

* Check your site on **mobile** and **desktop**
* Ensure your device targeting and page targeting settings match
* Wait for any **delay timer** if configured
* Ensure the banner/button hasn't been dismissed recently (frequency rules apply)


---

# Agent Instructions: 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:

```
GET https://help.twinr.dev/app-marketing-widget/website-setup-for-app-marketing-widgets.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.
