Integrate external live chat to Sitecore JSS

Question

I am trying to integrate live chat in Sitecore JSS App. I am using Vue for coding.

I need add some external Javascript for webchat to work and I want to configure the url's in Sitecore. My question is what is the best way to load external scripts into the head tag.

I can modify the index.html but obviously that won't be coming from content.

My code so far (this is only to load specific dom elements for chat to work). No work is yet done for loading external scripts:

Custom api controller:

/// <summary>
/// Live chat api controller
/// This controller is used by JSS forms
/// </summary>
public class LiveChatApiController: ServicesApiController
{
    private readonly ILiveChatService _liveChatService;

    public LiveChatApiController(ILiveChatService liveChatService)
    {
        _liveChatService = liveChatService;
    }
    [HttpGet]
    public IHttpActionResult GetLiveChatConfig()
    {
        return Ok(_liveChatService.GetSiteConfig());
    }
}

The code to get the json needed to be loaded:

public ChatConfigurationModel GetBaseChatConfig()
        {
            var chatConfiguration = new ChatConfigurationModel();
            Item formsJssRootItem = Sitecore.Context.Database.GetItem(Sitecore.Context.Site.SiteInfo.RootPath);
            if (formsJssRootItem.IsInSxaContext() && formsJssRootItem.InheritsFrom(Sitecore.XA.JSS.Foundation.Multisite.Templates.JSSSite.ID))
            {
                Item jssSiteSettings = formsJssRootItem.FirstChildInheritingFrom(Sitecore.XA.JSS.Foundation.Multisite.Templates.JSSSettings.ID);
                Item liveChatConfiguration = jssSiteSettings.Children
                .FirstOrDefault(i => i.InheritsFrom(Templates.LiveChatJssConfiguration.Id));

                if (liveChatConfiguration == null) return chatConfiguration;

                chatConfiguration.Enabled = liveChatConfiguration.Fields[Templates.LiveChatJssConfiguration.Fields.Enabled].IsChecked();
                chatConfiguration.MainChatConfiguration.DebugMode = liveChatConfiguration.Fields[Templates.LiveChatJssConfiguration.Fields.DebugEnabled].IsChecked();
                chatConfiguration.WebChatConfiguration.MinimizeOnMobileRestore = liveChatConfiguration.Fields[Templates.LiveChatJssConfiguration.Fields.MinimizeOnMobileRestore].IsChecked();
                chatConfiguration.CheckChatConfiguration.ProviderUrl = liveChatConfiguration[Templates.LiveChatJssConfiguration.Fields.CheckChatProviderUrl].ValueOrEmpty();
                chatConfiguration.WebChatConfiguration.ProviderUrl = liveChatConfiguration[Templates.LiveChatJssConfiguration.Fields.WebChatProviderUrl].ValueOrEmpty();

            }
            return chatConfiguration;
        }
        public void GetChatConfiguration(string currentItemId)
        {
            LiveChatRenderingModel renderingModel = new LiveChatRenderingModel();
            
            //Initialise custom our variables
            var teamEnabled = false;
            var teamName = string.Empty;
            var pageEnabled = false;

            var chatConfiguration = GetBaseChatConfig();

            if (chatConfiguration.Enabled) //save time not doing the rest
            {
                //Find out if we've enabled live chat on the page and on the team level
                pageEnabled = Sitecore.Context.Database.GetItem(new Sitecore.Data.ID(currentItemId)).Fields[Templates.LiveChat.Fields.Enabled].IsChecked();

                if (pageEnabled && ID.TryParse(Rendering.Item.Fields[Templates.LiveChat.Fields.Team]?.Value, out var teamId))
                {
                    var teamReference = Sitecore.Context.Database.Items.GetItem(teamId);
                    teamName = teamReference.Fields[Templates.LiveChatTeam.Fields.TeamName].Value;
                    teamEnabled = teamReference.Fields[Templates.LiveChatTeam.Fields.Enabled].IsChecked() &&
                                  !string.IsNullOrEmpty(teamName);
                }
            }

            //Add our derived/calculated properties to the configuration model for the widget to consume
            chatConfiguration.MainChatConfiguration.Enabled = pageEnabled && teamEnabled && chatConfiguration.Enabled;
            chatConfiguration.CheckChatConfiguration.TeamName = teamName;
            renderingModel.ChatConfiguration = chatConfiguration;
            renderingModel.JsonDataProperties = GetJsonProperties(chatConfiguration);

            return renderingModel;
        }

I can also use content resolver to get the data I need or this is a custom api but either way the problem of loading external scripts remains unsolved.

My sitecore config: