Embed Widgets

PraiseLane provides two embed scripts for your website:

1. Display Widget (embed.min.js) - Shows approved testimonials
2. Collection Widget (collect-embed.js) - Collects new testimonials

Prerequisites

Before embedding widgets, you must configure allowed domains in your project settings:

1. Go to your project dashboard
2. Find the "Allowed Domains" section
3. Add domains where you'll embed the widgets (e.g., example.com, *.staging.example.com)

Embeds will not work on domains that aren't in this list.

---

Display Widget

Shows social-proof notifications (popup and/or inline feed) using approved notification events.

Basic Usage

<script src="https://yourapp.com/embed.min.js" data-project="your-project-slug"></script>

Features

• Popup notifications
• Inline feed notifications
• Page/device/frequency targeting from project settings
• Built-in interaction tracking (impression/click/hover/conversion)
• Runtime control API via window.PraiseLaneProof

---

Collection Widget

Lets visitors submit testimonials directly on your website.

Inline Form

Renders the form directly in the page:

<script
  src="https://yourapp.com/collect-embed.js"
  data-project="your-project-slug"
  data-mode="inline">
</script>

Modal with Auto Button

Creates a styled button that opens the form in a modal:

<script
  src="https://yourapp.com/collect-embed.js"
  data-project="your-project-slug"
  data-mode="modal">
</script>

Customize the button text:

<script
  src="https://yourapp.com/collect-embed.js"
  data-project="your-project-slug"
  data-mode="modal"
  data-button-text="Share Your Feedback">
</script>

Modal with Custom Trigger

Use your own button or element to trigger the modal:

<button id="feedback-btn">Give Feedback</button>

<script
  src="https://yourapp.com/collect-embed.js"
  data-project="your-project-slug"
  data-mode="modal"
  data-trigger="#feedback-btn">
</script>

JavaScript API

Open the form programmatically from anywhere in your code:

<script src="https://yourapp.com/collect-embed.js" data-project="your-project-slug"></script>

<script>
  document.getElementById('custom-btn').addEventListener('click', function() {
    PraiseLane.openForm('your-project-slug');
  });
</script>

---

Configuration Options

Display Widget (embed.min.js)

| Attribute | Required | Default | Description | |-----------|----------|---------|-------------| | data-project | Yes | - | Your project's unique slug | | data-mode | No | popup | popup, inline, or both | | data-theme | No | system | light, dark, or system | | data-position | No | project setting | Position override: top_left, top_right, bottom_left, bottom_right | | data-inline-target | No | script parent | CSS selector where inline feed mounts | | data-debug | No | false | Enable console debug logs (true, 1, yes) |

Runtime API

The display runtime exposes window.PraiseLaneProof.trigger(action).

Supported actions:

• start
• stop
• reload
• restartOrder
• resetCount

Collection Widget (collect-embed.js)

| Attribute | Required | Default | Description | |-----------|----------|---------|-------------| | data-project | Yes | - | Your project's unique slug | | data-mode | No | inline | inline or modal | | data-trigger | No | - | CSS selector for custom trigger element (modal mode only) | | data-button-text | No | Leave a testimonial | Button text for auto-created modal trigger |

---

Styling

Both widgets use self-contained styles that won't conflict with your site's CSS. The widgets automatically use your project's brand color for accents.

Custom Styling

The widgets add containers with specific IDs that you can target:

• Display widget: #testimoni-widget
• Collection widget: #testimoni-collect-{slug}

Example custom styling:

#testimoni-widget {
  max-width: 800px;
  margin: 0 auto;
}

---

Performance

The embed widget is optimized for fast loading and minimal impact on your site's performance.

Optimizations

• Minified code: The embed.min.js script is minified and compressed for faster downloads
• Code splitting: Only loads the code needed for the specific widget type
• Efficient rendering: Uses optimized DOM manipulation and event delegation
• Lazy loading: Widget content loads after the page is interactive
• Small footprint: Minimal CSS and JavaScript to reduce bundle size

Performance Metrics

• File size: ~3KB gzipped (minified version)
• Initial load: < 50ms on 3G networks
• Time to Interactive: Widget renders within 100ms after script load
• No dependencies: Pure JavaScript with no external library dependencies

Best Practices

For optimal performance:

1. Use the minified version (embed.min.js) in production
2. Add the script tag before the closing </body> tag
3. Consider using defer or async attributes for non-blocking load:

<script src="https://yourapp.com/embed.min.js" data-project="your-project-slug" defer></script>

---

Domain Security

For security, embeds only work on domains you've explicitly allowed:

• Configure allowed domains in your project settings
• Use wildcard patterns for subdomains: *.example.com
• Include port for local development: localhost:3000

Requests from unauthorized domains receive a 403 error.

---

Submitted Testimonials

Testimonials submitted via the embed:

• Are marked as "pending" status
• Have source marked as "embed"
• Appear in your dashboard for moderation
• Must be approved before appearing in the display widget