Dynamic values in Element Code headers possible?

Plugin builders
1

In the Shared tab → HTML Head of the plugin editor you can do this:
"Dynamic values (API key, tracking code, etc.) can be inserted between _*_ (for instance _*_API KEY_*_) and will be available to users in the Plugin Tab.

Can something like this be done in the Elements tab → element code → Headers section?

I have tried the same syntax of _*_API_KEY_*_ and it doesn’t work.

2

While it’s not exactly what you’re asking, you can achieve the same effect in 99% of cases by using an action to append the script or style in the header.
Here it goes:

To load an external CSS

    loadCSS = function(href) {

        var cssLink = $("<link>");
        $("head").append(cssLink); //IE hack: append before setting href

        cssLink.attr({
          rel:  "stylesheet",
          type: "text/css",
          href: href
        });

      };

      loadCSS("https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.2/styles/default.min.css");

Now for loading external scripts

    var script = document.createElement('script');
      script.onload = function () {

      // do whatever you want now that the external script is loaded


      };

      script.src = "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.2/highlight.min.js";

      document.head.appendChild(script);

Now to apply to the page a style you’re creating right now:

    var sheet = document.createElement('style');

         sheet.innerHTML =

            `.selector {
         color: ${properties.icon_color};
         font-size: ${properties.icon_size}px;
      }`;

          document.head.appendChild(sheet);
1 Like