# Embed & Integration

Display license badges and widgets on your website or platform.

### What Is WEIR Embed?

WEIR Embed allows you to display license badges and verification widgets on external websites. Use embeds to show that your content features properly licensed identities, or to let visitors verify licensing status in real-time.

Embeds are useful for content creators, platforms, and businesses that want to demonstrate their commitment to ethical identity rights management.

### Embed Types

- **License Badge**: A compact badge showing the license holder's name and verification status. Clicking opens the full license details on WEIR.
- **Verification Widget**: A larger widget showing license details, images, and terms. Includes real-time verification that updates if the license status changes.
- **Subscription Proof**: Displays your active subscription to a license, proving you have rights to use the licensed identity in your content.

### Adding an Embed to Your Site

1. Navigate to the license you want to embed (yours or one you subscribe to)
2. Click the "Share" or "Embed" button on the license detail page
3. Choose your embed type (Badge, Widget, or Subscription Proof)
4. Customize appearance options (size, theme, colors)
5. Copy the generated embed code
6. Paste the code into your website's HTML where you want the embed to appear

#### Example Embed Code

```html
<!-- WEIR License Badge -->
<div
  data-weir-embed="badge"
  data-license-id="abc123"
  data-theme="light"
></div>
<script src="https://embed.weir.ai/v1/widget.js" async></script>
```

**Tip:** The embed script is lightweight (~5KB) and loads asynchronously to avoid slowing down your page.

### JavaScript SDK

For more control, use the JavaScript SDK to programmatically create and manage embeds:

```javascript
// Initialize the WEIR SDK
import { WeirEmbed } from '@weir/embed';

const embed = new WeirEmbed({
  licenseId: 'abc123',
  container: '#weir-badge',
  type: 'badge',
  theme: 'auto', // follows user's system preference
  onVerified: (status) => {
    console.log('License verified:', status);
  }
});

// Later: update or destroy
embed.refresh();
embed.destroy();
```

**Note:** The SDK requires an API credential with the `embed:read` scope. This can be a restricted credential for client-side use.

### Platform Integrations

Pre-built integrations are available for popular platforms:

- **WordPress:** Plugin available in the WordPress directory
- **Shopify:** App available in the Shopify App Store
- **Webflow:** Custom code component with visual configuration
- **Squarespace:** Code injection instructions provided
- **React/Vue/Angular:** Component libraries available via npm

Check the [developer portal](/content/developers/index.html) for installation guides and platform-specific documentation.

### Verification API

For server-side verification without embeds, use the Verification API directly:

```bash
curl -X GET "https://api.weir.ai/v1/licenses/abc123/verify" \
  -H "Authorization: Bearer YOUR_API_KEY"
```

#### Response

```json
{
  "verified": true,
  "license_id": "abc123",
  "license_holder": "Jane Doe",
  "license_type": "commercial",
  "valid_until": "2027-01-01T00:00:00Z",
  "terms_url": "https://weir.ai/license/abc123/terms"
}
```

**Authentication:** API verification requires a valid API key. For client-side verification, use the embed widget instead.

### Customization Options

Embeds can be customized to match your site's design:

- **Theme:** Light, dark, or auto (follows system preference)
- **Size:** Compact, standard, or expanded
- **Colors:** Custom accent color to match your brand
- **Language:** Supports multiple languages based on user locale
- **Border radius:** Rounded, slightly rounded, or square corners

### Domain Restrictions

For security, you can restrict which domains can display your embeds:

1. Go to Settings → Developers
2. Find your embed credential
3. Click "Allowed Domains"
4. Add the domains where your embed will appear (e.g., yoursite.com)
5. Save changes

**Note:** Embeds will only load on domains in your allowed list. Leave empty to allow all domains (not recommended for production).

### Troubleshooting

#### Embed not loading

Check that the license ID is correct and the license is published. Also verify your domain is in the allowed domains list.

#### Styling conflicts

The embed uses Shadow DOM to isolate styles. If you see issues, ensure no global CSS is using `!important` on elements that might affect the embed container.

#### Content Security Policy errors

Add `embed.weir.ai` and `api.weir.ai` to your CSP's `script-src` and `connect-src` directives.