How to Embed a Feedspace Widget in Angular

Overview

Embedding a Feedspace widget in an Angular application requires loading the embed script after the component view has been initialised. Angular’s AfterViewInit lifecycle hook is the right place to do this, ensuring the target DOM element exists before the Feedspace script tries to attach the widget to it. The steps below show you how to set up a dedicated widget component and add it to any Angular page.

How to Embed Your Feedspace Widget in Angular

Step 1: Copy Your Widget Embed Code from Feedspace

Log in to your Feedspace account and go to Widgets. Open the widget you want to embed, click the Share tab, and select the Angular framework tab. Copy the embed code shown, noting your unique data-id value.

Step 2: Generate a Widget Component

In your Angular project, generate a new component for the widget using the Angular CLI:

ng generate component feedspace-widget

Step 3: Add the Widget Template

Open feedspace-widget.component.html and add the embed div with your widget ID. Replace YOUR_WIDGET_ID with the data-id value from your Feedspace embed code:

<div class="feedspace-embed" data-id="YOUR_WIDGET_ID"></div>

Step 4: Load the Embed Script in the Component

Open feedspace-widget.component.ts and implement AfterViewInit to load the Feedspace script after the view is ready. Using AfterViewInit ensures the div element exists in the DOM before the script initialises the widget:

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

@Component({
  selector: 'app-feedspace-widget',
  templateUrl: './feedspace-widget.component.html',
})
export class FeedspaceWidgetComponent implements AfterViewInit {
  ngAfterViewInit(): void {
    const script = document.createElement('script')
    script.src = 'https://js.feedspace.io/v1/embed/embed.min.js'
    script.type = 'text/javascript'
    script.async = true
    document.body.appendChild(script)
  }
}

Step 5: Use the Component in Your App

Add the app-feedspace-widget selector to any page template where you want the widget to appear:

<section class="testimonials">
  <h2>What Our Customers Say</h2>
  <app-feedspace-widget></app-feedspace-widget>
</section>

Step 6: Serve and Verify

Run ng serve and open your browser to confirm the widget appears correctly. If the widget area is empty, verify that the data-id in the template matches exactly the value shown in the Feedspace Share tab embed code for your widget.

What You Can Do Next

• Customise the widget’s appearance in the Feedspace Design tab before embedding to ensure the colors, font, and card style match your Angular app’s design system.
• Move the script loading logic to a shared Angular service if you plan to embed multiple Feedspace widgets on different pages, so the script is only loaded once.
• Use the Feedspace widget preview in the Share tab to check desktop and mobile appearance before deploying your Angular app to production.
• Track impressions and click rate for the embedded widget from your Feedspace Widgets dashboard to measure visitor engagement after launch.