Other Frameworks

TheWebRatings is a plain JavaScript widget. The integration pattern is the same everywhere:

Load the script (<script src="https://cdn.thewebratings.com/twr.min.js">)
Call TheWebRatings.init({ apiKey }) after the DOM is ready
Call TheWebRatings.open(email, name) to show the widget

Authenticated pages only

Initialize the widget only in your authenticated area (dashboard, member portal, admin panel). Do not add the script or call init() on public-facing pages — the auto-prompt will fire for anonymous visitors.

Below are framework-specific notes for loading and initialization.

Angular

Add the script to the HTML of your authenticated module (not the public index.html), then initialize in AfterViewInit:

import { Component, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.html'
})
export class DashboardComponent implements AfterViewInit {
  ngAfterViewInit() {
    if (typeof (window as any).TheWebRatings !== 'undefined') {
      (window as any).TheWebRatings.init({ apiKey: 'your-api-key' });
    }
  }

  openFeedback() {
    (window as any).TheWebRatings?.open('[email protected]', 'John Doe');
  }
}

<button (click)="openFeedback()">Leave a Review</button>

For SSR (Angular Universal), guard window access with typeof window !== 'undefined'.

Nuxt.js

Option A: Client Plugin (Recommended)

Create plugins/twr.client.ts:

export default defineNuxtPlugin(() => {
  if (process.client) {
    const script = document.createElement('script');
    script.src = 'https://cdn.thewebratings.com/twr.min.js';
    script.async = true;
    document.head.appendChild(script);

    script.onload = () => {
      window.TheWebRatings?.init({
        apiKey: useRuntimeConfig().public.twrApiKey || 'your-api-key'
      });
    };
  }
});

Option B: Via nuxt.config.ts

export default defineNuxtConfig({
  app: {
    head: {
      script: [{ src: 'https://cdn.thewebratings.com/twr.min.js', async: true }]
    }
  },
  runtimeConfig: {
    public: {
      twrApiKey: process.env.NUXT_PUBLIC_TWR_API_KEY || 'your-api-key'
    }
  }
});

Use in a component:

<template>
  <button @click="openFeedback">Leave a Review</button>
</template>

<script setup lang="ts">
onMounted(() => {
  if (process.client && window.TheWebRatings) {
    window.TheWebRatings.init({ apiKey: useRuntimeConfig().public.twrApiKey });
  }
});

const openFeedback = () => {
  window.TheWebRatings?.open('[email protected]', 'User Name');
};
</script>

SvelteKit

Add the script to src/app.html, then initialize with onMount:

<script>
  import { onMount } from 'svelte';
  import { browser } from '$app/environment';

  let ready = false;

  onMount(async () => {
    if (browser && window.TheWebRatings) {
      await window.TheWebRatings.init({
        apiKey: import.meta.env.VITE_TWR_API_KEY || 'your-api-key'
      });
      ready = true;
    }
  });

  function openFeedback() {
    if (ready) window.TheWebRatings?.open('[email protected]', 'User Name');
  }
</script>

<button on:click={openFeedback} disabled={!ready}>Leave a Review</button>

Use browser from $app/environment for SSR safety. Initialize once in an authenticated +layout.svelte (not your root layout) for app-wide availability within logged-in pages.

Astro

Add the script to your layout with is:inline:

---
// src/layouts/DashboardLayout.astro — use for authenticated pages only
---
<html lang="en">
  <head>
    <script is:inline src="https://cdn.thewebratings.com/twr.min.js"></script>
  </head>
  <body><slot /></body>
</html>

Initialize in a page or island component:

<button id="feedback-btn">Leave a Review</button>

<script>
  window.addEventListener('load', () => {
    if (window.TheWebRatings) {
      window.TheWebRatings.init({
        apiKey: import.meta.env.PUBLIC_TWR_API_KEY || 'your-api-key'
      }).then(() => {
        document.getElementById('feedback-btn')?.addEventListener('click', () => {
          window.TheWebRatings.open('[email protected]', 'User Name');
        });
      });
    }
  });
</script>

For islands architecture (React/Svelte/Vue), use client:load and initialize in the component's lifecycle hook as shown in the respective framework sections above.

Ionic + Capacitor

Add the script to your authenticated view (not the root src/index.html). Wait for the platform to be ready before initializing:

import { Platform } from '@ionic/angular';

async ngAfterViewInit() {
  await this.platform.ready();

  if (typeof (window as any).TheWebRatings !== 'undefined') {
    await (window as any).TheWebRatings.init({ apiKey: 'your-api-key' });
  }
}

For explicit platform detection:

import { Capacitor } from '@capacitor/core';

const platform = Capacitor.getPlatform(); // 'ios', 'android', or 'web'

Works with Ionic's Angular, React, and Vue variants. Enable offline: true for mobile users with poor connectivity.

PWA Builder

Add the script to your authenticated pages. Enable offline features:

window.addEventListener('load', async () => {
  if (window.TheWebRatings) {
    await window.TheWebRatings.init({
      apiKey: 'your-api-key',
      features: { offline: true, retry: true }
    });
  }
});

TheWebRatings works alongside PWABuilder's service worker. No additional service worker configuration is needed.

Vite + Workbox

Install vite-plugin-pwa for service worker support. Load the script in your authenticated pages or dynamically:

// src/twr.js
export async function initializeTWR() {
  if (!window.TheWebRatings) {
    await new Promise((resolve, reject) => {
      const script = document.createElement('script');
      script.src = 'https://cdn.thewebratings.com/twr.min.js';
      script.async = true;
      script.onload = resolve;
      script.onerror = reject;
      document.head.appendChild(script);
    });
  }

  await window.TheWebRatings?.init({
    apiKey: import.meta.env.VITE_TWR_API_KEY || 'your-api-key',
    features: { offline: true, retry: true }
  });
}

Optionally cache the CDN script via Workbox:

// vite.config.js
VitePWA({
  workbox: {
    runtimeCaching: [{
      urlPattern: /^https:\/\/cdn\.thewebratings\.com\/.*/i,
      handler: 'CacheFirst',
      options: { cacheName: 'twr-cache', expiration: { maxAgeSeconds: 86400 } }
    }]
  }
})

Environment Variables

Framework	Variable	Access
Angular	`environment.ts`	`environment.twrApiKey`
Nuxt	`NUXT_PUBLIC_TWR_API_KEY`	`useRuntimeConfig().public.twrApiKey`
SvelteKit	`VITE_TWR_API_KEY`	`import.meta.env.VITE_TWR_API_KEY`
Astro	`PUBLIC_TWR_API_KEY`	`import.meta.env.PUBLIC_TWR_API_KEY`
Ionic (React)	`REACT_APP_TWR_API_KEY`	`process.env.REACT_APP_TWR_API_KEY`
Ionic (Vue/Vite)	`VITE_TWR_API_KEY`	`import.meta.env.VITE_TWR_API_KEY`
Vite	`VITE_TWR_API_KEY`	`import.meta.env.VITE_TWR_API_KEY`

Other Frameworks

On this page