Contrib.social

Provide an easy way to load external scripts (third-party libraries)

Open on Drupal.org →
Created on 23 November 2022, about 2 years ago
Updated 17 July 2024, 7 months ago

Problem/Motivation

Sometimes you need to load external JS widgets on a Drupal page, which have no Drupal module available for integration.

Examples are broad, like tracking script, analytics, chats, newsletter forms other widgets, ...

This isn't a simple task for Drupal users, who are not developers!
Asset injector sounds like it could solve this, but currently can't (and I think that should be outlined, until this is added).

Even for developers / administrators, it might be helpful in some cases to be able to add external scripts using asset injector

Steps to reproduce

Paste an external script like <script src=""> into the asset injector JS textarea and see JS errors reported.
The script isn't added to the page as expected.

Proposed resolution

There are several possible ways to solve this from the UI perspective.

First (A) I thought about adding a separate "External JavaScript" type to separate this from the existing one, but I have to admit, that this might not work well in the real world. Quite often such scripts are a combination of adding a library and some lines of inline JavaScript for initializationlike this:

<script src="https://www.example.com/widget-sdk.js" id="widget-sdk-id" data-cid="123">
<script>
  doSomething();
  widget.initialize();
</script>

so I think to be really useful, we need this combined.

Still, we could decide to put that into a separate type AssetInjectorBase subtype, but it might be hard for regular users to decide, which one to use then.

Another option (B) would be to add a switch to the AssetInjectorJsForm to select if the pasted script is inline JavaScript or HTML Script (we'd have to find a good label).
Based on that, the script / library has to be handled differently, I guess. Perhaps some of the additional options like Preprocess JS are not available.

Of course this needs clear documentation and examples in the UI.

Temporary workaround

For anyone who can code and needs a temporary workaround to load external scripts, may use this trick:
Convert a regular HTML script like:
<script src="https://www.example.com/widget-sdk.js" />

to pure vanilla JavaScript like this:

var script = document.createElement('script');
script.src = "https://www.example.com/widget-sdk.js";
document.head.appendChild(script);

or more complex using Drupal behaviors:
(function (Drupal) {
Drupal.behaviors.my_asset = {
attach(context, settings) {
var script = document.createElement('script');
script.src = "https://www.example.com/widget-sdk.js";
document.head.appendChild(script);
},
};
})(Drupal);

Remaining tasks

  1. [x] Add information to the module page and README.md that the module currently does not support
    HTML tags to embed widgets: #3232172: Improve form labels and descriptions →
  2. [] Discuss how to add the described functionality technically
  3. [] Implement the functionality as MR and write tests
  4. [] Release
  5. [] Create new screenshots and add the new functionality to the README.md. Remove the above note about unsupported script tags for widgets
If the maintainers entirely decide against that, at least the workaround should be added to the README.md for developers.

User interface changes

TBD, see above

API changes

TBD

Data model changes

TBD
✨ Feature request
Status

Needs review

Version

2.0

Component

Code

Created by

🇩🇪Germany Anybody Porta Westfalica

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024