Angular embed ReplyBox into a component

I would like to know the correct way of embedding getReplyBox.com script into angular component. enter image description here

so right now it's showing the UI but there are couple of problems

  1. The comments were not loaded.
  2. When I navigate to other route and return to this route.- the entire UI disappears.

This are my effort so far:

index.html:

<body>
  <app-root></app-root>

  <script src="https://cdn.getreplybox.com/js/embed.js"></script>
</body>

I added the script to the index.html

replybox.component:

<div>
      <div id="replybox"></div>
</div>

replybox.component.ts:

import { Component, AfterViewInit, ViewChild, Renderer2, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';

@Component({
  selector: 'app-replybox',
  templateUrl: './replybox.component.html',
  styleUrls: ['./replybox.component.scss'],
})
export class ReplyboxComponent implements AfterViewInit {
  @ViewChild('replybox') replybox: any;

  constructor(
    private _renderer2 : Renderer2,
    @Inject(DOCUMENT) private _document: Document
  ) {}

  ngAfterViewInit() {
    let script = this._renderer2.createElement('script');
    script.text = `
    window.replybox = {
      site: 'MY_SITE'
    };
    `;

    this._renderer2.appendChild(this._document.body, script);
  }
}

anyone know how to make this work?