Skip to main content

Extended Editor | GTM Third-Party SDK Installation & AI Prompting Guide

Installing a Third-Party SDK via GTM & How to Instruct AI to Use It

This article explains how to extend the editor's capabilities using Google Tag Manager (GTM), and how to correctly instruct AI to use these installed resources.

1. Installing an SDK via GTM (using Lucide as an example)

If you want to use Lucide icons on your page, follow the steps below.

Prerequisites

  • Your page must have a completed CNAME setup. Pages without a custom domain bound can't trigger GTM.

GTM setup steps

  1. Add a new tag in your GTM container.

  2. Choose "Custom HTML" as the tag type.

  3. Paste in the following code:

<!-- Load the Lucide SDK --> <script src="[https://unpkg.com/lucide@latest](https://unpkg.com/lucide@latest)"></script>  <!-- Initialize Lucide icons --> <script>   function initFSIcons() {     if (typeof lucide !== 'undefined') {       lucide.createIcons();     }   }   // Make sure this runs after the page loads and after dynamic content renders   window.addEventListener('load', initFSIcons);   // If your page loads content asynchronously, we recommend triggering it again after a short delay   setTimeout(initFSIcons, 1000); </script> 
  1. Set the trigger to "All Pages", or to the URL of a specific promo page.

2. How to instruct AI to use a GTM-installed package (sample prompt)

Once you've installed the SDK in GTM, you need to explicitly tell the AI, when asking it to generate code, that "this package is already available in the environment" — that way the AI will generate the matching tag instead of something else.

Sample prompt (using Lucide as an example)

User prompt:

"Please write me a product introduction block. Note: my page environment already has the Lucide icon library installed via GTM, so wherever an icon is needed, use the <i data-lucide="icon-name"></i> format directly. Don't include any script tags in the code, and follow Feversocial's other development guidelines."

How the AI responds

  • The AI will know it doesn't need to generate emoji.

  • The AI will generate tags like <i data-lucide="shopping-cart"></i>.

  • Since GTM has already loaded the SDK globally, the icons will display correctly once this code is pasted into the editor and published.

3. Things to note

  1. Editor preview limitation: while editing in the dashboard, GTM scripts generally don't run in that context, so you may only see an empty <i> tag. Be sure to check the "preview page" or the "published live URL" to see the final result.

  2. SDK conflicts: avoid loading multiple SDKs that overlap in function (like loading both FontAwesome and Lucide at once), as it can slow down page load.

  3. SVG warning: even when icons are generated via an SDK, make sure the SDK ultimately renders an <i> or <span>-based font icon, rather than inserting large amounts of raw <svg> tags directly, which risk being stripped by the filter.

Did this answer your question?