Call CDN delivered library in Angular Component

Question

I am trying to interact with the HelpScout beacon via their API methods however struggling to interact with the DOM from the controller.

I have tried running functions such as

document.HS.beacon.ready(function() {
  // Open the Beacon as soon as it's ready
  this.open();
});

on various lifeCycle hooks such as ngAfterViewInit() however, I get a number of errors in the compiler for as HS is not a property on document.

There are numerous component based JS frameworks that must have a robust solution for interacting with libraries that are delivered via CDN? I would rather they packaged up the code and ran it as an npm / yarn package, however that is not the case.

Many thanks in advance.

EDIT: I note that they are simply injecting this code : https://djtflbt20bdde.cloudfront.net. I might just run this locally? Ideas?

Answer 1

I suppose you could init the Beacon object via script tag, that creates an instance of the Beacon object as a property of window. If you need to interact with this object inside an Angular component or service, you should declare it first (in my case, I needed to destroy the Object):

import { Component } from '@angular/core';
declare let Beacon: any ;
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
 closeBeacon(){
  Beacon('destroy');
 }
}