Js Widget

Quick Start

Add this script tag to your HTML, right before the closing </body> tag:

txt

<script
  src="https://cdn.altextapi.com/widget.js"
  data-api-key="alt_YOUR_API_KEY"
  data-auto="true"
></script>

That's it. The widget automatically scans your page for images with missing alt text and fills them in.

Configuration

All options are passed via data-* attributes:

| Attribute | Type | Default | Description | |-----------|------|---------|-------------| | data-api-key | string | required | Your AltText AI API key | | data-auto | boolean | false | Automatically process images on page load | | data-lazy | boolean | true | Process images as they enter the viewport | | data-overwrite | boolean | false | Replace existing alt text | | data-language | string | "en" | ISO 639-1 language code | | data-selector | string | "img" | CSS selector for images to process | | data-batch-size | number | 5 | Images to process simultaneously |

Example: Full Configuration

txt

<script
  src="https://cdn.altextapi.com/widget.js"
  data-api-key="alt_YOUR_API_KEY"
  data-auto="true"
  data-lazy="true"
  data-language="de"
  data-selector=".content img, .product img"
  data-batch-size="5"
></script>

JavaScript API

The widget exposes a global AltTextAI object:

txt

// Manually trigger processing
AltTextAI.process();

// Process specific images
AltTextAI.process(document.querySelectorAll(".gallery img"));

// Check remaining credits
const usage = await AltTextAI.getUsage();
console.log(`Credits remaining: ${usage.credits_remaining}`);

// Listen for events
AltTextAI.on("processed", (img) => {
  console.log(`Processed: ${img.src}`);
});

AltTextAI.on("error", (img, error) => {
  console.error(`Failed: ${img.src}`, error);
});

Framework Integration

React

txt

import { useEffect } from "react";

function App() {
  useEffect(() => {
    const script = document.createElement("script");
    script.src = "https://cdn.altextapi.com/widget.js";
    script.setAttribute("data-api-key", "alt_YOUR_API_KEY");
    script.setAttribute("data-auto", "true");
    document.body.appendChild(script);

    return () => {
      document.body.removeChild(script);
    };
  }, []);

  return <div>Your app content</div>;
}

Next.js

txt

import Script from "next/script";

export default function Layout({ children }) {
  return (
    <>
      {children}
      <Script
        src="https://cdn.altextapi.com/widget.js"
        data-api-key="alt_YOUR_API_KEY"
        data-auto="true"
        strategy="afterInteractive"
      />
    </>
  );
}

Don't expose your API key

The JavaScript widget runs in the browser. Your API key is visible in the page source. Use a domain-restricted key (Pro+ plans) to prevent unauthorized use, or proxy requests through your backend.