# 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="https://3731994945-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlBy5z08zL1UoCwNqmg%2Fuploads%2FGLkzfqnJ4gnWFJavzBVt%2FScreenshot%202025-11-20%20at%204.55.21%E2%80%AFPM.png?alt=media&#x26;token=dd4fca22-5097-4091-90b9-b282e47c3694" 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)
