Add external JavaScript files containing a parameter in the URL

Question

I need to add some external JS files to my website. This is an extract of the module.libraries.yml file.

my_live_chat:
  js:
    https://mylivechat.com/chatinline.aspx?hccid=12345678 : { type: external, attributes: { defer: true, async: true, data-cfasync: 'false' } }
    https://www.mylivechat.com/chatapi.aspx?hccid=12345678 : { type: external }

As you can see, they have this final variable hccid in them that is different for each website.

I'd like to create a custom module where I only need the client ID (the hccid value) and the module adds all the needed JavaScript files.

I know how to create a custom module with a settings form to ask for the variable value and I know how to add external JavaScript files to my module.libraries.yml file.

How can I deal with that variable so it can be different on each website without modifying the module?

Answer 1

Use the hook_library_info_build hook to add dynamic library definitions.

The key(s) could be stored as configuration. e.g. use Simple Configuration API

You would then in the hook, check if the configuration has a value and if so add the library and if not, well depending on how you want to deal with it.