Remote JS widget

by ckissi

HTML

<div id="widget-container">
</div>

JavaScript

;(function () {
  // Configuration
  const config = {
    targetDivId: "widget-container", // ID of the div to inject into
    widgetText: "Visit our site!", // Text to display in the widget
    linkUrl: "https://example.com", // URL to link to
    styles: {
      widget:
        "padding: 10px; background-color: #f0f0f0; border-radius: 5px; font-family: Arial, sans-serif;",
      link: "color: #0066cc; text-decoration: none; font-weight: bold;",
    },
  }

  // Function to create and inject the widget
  function injectWidget() {
    const targetDiv = document.getElementById(config.targetDivId)
    if (!targetDiv) {
      console.error(`Target div with id "${config.targetDivId}" not found.`)
      return
    }

    const widget = document.createElement("div")
    widget.style.cssText = config.styles.widget

    const link = document.createElement("a")
    link.href = config.linkUrl
    link.textContent = config.widgetText
    link.style.cssText = config.styles.link
    link.target = "_blank" // Open link in new tab

    widget.appendChild(link)
    targetDiv.appendChild(widget)
  }

  // Inject the widget when the DOM is fully loaded
  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", injectWidget)
  } else {
    injectWidget()
  }
})()