si queremos

Inyectar cualquier componentes a nuestro index html pero hacerlo dinámico de tal forma que no colisionen nuestros entornos…

https://betterprogramming.pub/angular-how-to-include-scripts-only-in-production-a08580823029

Using Post-Processing to Inject Scripts

https://github.com/angular/angular-cli/issues/4451

y desde app.component llamamos al servicio y ejecutamos:

this.smartsuppService.init();

import { DOCUMENT } from '@angular/common';
import { Inject, Injectable, Renderer2, RendererFactory2 } from '@angular/core';
import { environment } from 'src/environments/environment';

@Injectable({
  providedIn: 'root'
})
export class SmartsuppService {

  private _renderer2: Renderer2
  private script: HTMLScriptElement
  smartsuppId : string = environment.SmartsUppId

  constructor(
    rendererFactory: RendererFactory2,
    @Inject(DOCUMENT) private _document: Document
  ) { 
    this._renderer2 = rendererFactory.createRenderer(null, null);
  }

  init(){
                
    this.script = this._renderer2.createElement('script');
    this.script.type = `text/javascript`;
    this.script.text = `
        var _smartsupp = _smartsupp || {};
        _smartsupp.key = '${this.smartsuppId}';
        window.smartsupp||(function(d) {
          var s,c,o=smartsupp=function(){ o._.push(arguments)};o._=[];
          s=d.getElementsByTagName('script')[0];c=d.createElement('script');
          c.type='text/javascript';c.charset='utf-8';c.async=true;
          c.src='https://www.smartsuppchat.com/loader.js?';s.parentNode.insertBefore(c,s);
        })(document);
    `;

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

}