art-of-technology/widget-studio-skill

Overview

This skill integrates the Widget Studio SDK (WidgetX) into web projects and provides exact, copy-paste code for HTML, React, Next.js, Shopify, and WordPress setups. It guides the developer to detect the project type, inject the precise snippet required, and reminds you to always provide your Widget Studio site key before proceeding. Follow the instructions exactly as given to prevent initialization and runtime issues.

How this skill works

The skill detects the project type by checking key files (next.config, package.json, theme.liquid, functions.php, or .html files) and returns the exact integration snippet for that environment. Each snippet loads the SDK from the canonical URL and initializes WidgetX with your siteKey, preserving initialization order, polling logic, and double-init guards where required. For React/Next.js it includes proper script loading strategies and cleanup patterns; for Shopify/WordPress it enforces the __widgetx_inited guard.

When to use it

• Adding Widget Studio / WidgetX to a plain HTML site
• Integrating the SDK into a React or TypeScript app
• Adding Widget Studio to a Next.js project (App or Pages router)
• Installing WidgetX into a Shopify theme (theme.liquid)
• Enqueuing WidgetX in a WordPress theme via functions.php

Best practices

• Always ask for and replace only YOUR_SITE_KEY with the provided site key
• Copy the provided code blocks exactly; do not simplify or change structure
• Preserve the __widgetx_inited guard in Shopify and WordPress to avoid double-init
• Use async/afterInteractive script loading as shown for performance
• Include the TypeScript declaration exactly when using TS to ensure types

Example use cases

• Add the HTML snippet just before </body> to enable widgets on a static site
• Inject the React snippet into App.tsx with cleanup to safely load the SDK
• Add the Next.js Script in app/layout.tsx or pages/_app.tsx based on router
• Paste the Shopify snippet into theme.liquid to initialize across storefront pages
• Enqueue the SDK in functions.php and add the inline init for WordPress themes