Angular App Testimonial Widget Embed

// src/app/storyproof-widget.component.ts (needs signal inputs and afterNextRender)
import { Component, afterNextRender, inject, input } from '@angular/core';
import { DOCUMENT } from '@angular/common';

const SRC = 'https://app.storyproof.io/embed.js';

@Component({
  selector: 'app-storyproof-widget',
  standalone: true,
  // attr. binding writes a real data attribute; leave the div empty.
  template: `<div [attr.data-storyproof-widget]="widgetId()"></div>`,
})
export class StoryProofWidgetComponent {
  widgetId = input.required<string>();
  private readonly doc = inject(DOCUMENT);

  constructor() {
    // Runs in the browser only, after the div is in the DOM.
    afterNextRender(() => {
      if (this.doc.querySelector(`script[src="${SRC}"]`)) return;
      const script = this.doc.createElement('script');
      script.src = SRC;
      script.async = true;
      this.doc.body.appendChild(script);
    });
  }
}

<!-- any template; add StoryProofWidgetComponent to that component's imports -->
<section class="testimonials">
  <h2>What customers say</h2>
  <app-storyproof-widget widgetId="YOUR_WIDGET_ID" />
</section>

<!-- Linking to a page with a widget from elsewhere in the app?
     A plain href (no routerLink) loads the page fresh. -->
<a href="/customers">Customer stories</a>