accessibleAI Logoaccessible
Integration & Setup

Implementation Guides

Schritt-für-Schritt Anleitungen für alle gängigen Plattformen: JavaScript API, WordPress, React, TYPO3, Shopify und mehr.

JavaScript API

JavaScript API Reference

Das accessibleAI Widget bietet eine einfache JavaScript API für die Integration und Konfiguration.

Configuration Options

ParameterTypeDefaultBeschreibung
tokenstringrequiredWidget-Authentifizierungs-Token aus Ihrem Dashboard
autoAnalyzebooleantrueStartet die Accessibility-Analyse automatisch beim Laden
autoApplyFixesbooleanfalseWendet Accessibility-Fixes automatisch an (ohne User-Genehmigung)

Method 1: Script Tag mit Data-Attributes

Die einfachste Integration - fügen Sie das Script-Tag mit Data-Attributes ein:

<script src="https://auth.accessibleai.eu/storage/v1/object/public/cdn/vae-loader-versioned.js" 
        data-token="YOUR_API_KEY"
        data-auto-analyze="true"
        data-auto-apply-fixes="false"
        async>
</script>

Method 2: Programmatische Initialisierung

Für dynamische Konfigurationen oder SPA-Integration:

// 1. Script laden
const script = document.createElement('script');
script.src = 'https://auth.accessibleai.eu/storage/v1/object/public/cdn/vae-loader-versioned.js';
script.async = true;
document.head.appendChild(script);

// 2. Nach dem Laden initialisieren
script.onload = () => {
  if (window.initializeAccessibleAIWidget) {
    window.initializeAccessibleAIWidget({
      token: 'YOUR_API_KEY',
      autoAnalyze: true,
      autoApplyFixes: false
    });
  }
};

Events

Das Widget dispatcht Custom Events, die Sie abfangen können:

// Widget initialisiert
window.addEventListener('vae-initialized', (event) => {
  console.log('Widget initialized:', event.detail);
  // event.detail.modules: { UI: true, Core: true, VersionManager: true }
});

💡 Best Practices

  • ✓ Nutzen Sie async Attribut für non-blocking Load
  • ✓ Token niemals im Frontend hardcoden - nutzen Sie Environment-Variablen
  • ✓ Bei SPAs: Initialisieren Sie nach jedem Route-Wechsel neu
  • ✓ autoApplyFixes: false für mehr Kontrolle über Änderungen

Standard Integration

Script Tag Einbindung

Fügen Sie den folgenden Code direkt vor dem schließenden </body> Tag Ihrer Website ein:

<script src="https://auth.accessibleai.eu/storage/v1/object/public/cdn/vae-loader-versioned.js" data-token="YOUR_API_KEY" async></script>

Ersetzen Sie YOUR_API_KEY durch Ihren persönlichen API-Schlüssel aus Ihrem accessibleAI Dashboard.

Google Tag Manager

Integration über Google Tag Manager

1. Neuen Tag erstellen

Erstellen Sie einen neuen Custom HTML Tag in Ihrem Google Tag Manager.

2. Code einfügen

<script src="https://auth.accessibleai.eu/storage/v1/object/public/cdn/vae-loader-versioned.js" data-token="YOUR_API_KEY" async></script>

3. Trigger konfigurieren

Setzen Sie den Trigger auf "All Pages" um das Widget auf allen Seiten zu aktivieren.

📚 Offizielle Dokumentation

CMS Integration

WordPressJoomlaTYPO3DrupalContao

WordPress

Fügen Sie den Code in Ihre footer.php ein oder nutzen Sie ein Plugin wie "Header and Footer Scripts":

// In functions.php oder über Plugin
add_action('wp_footer', function() {
  echo '<script src="https://auth.accessibleai.eu/storage/v1/object/public/cdn/vae-loader-versioned.js" data-token="YOUR_API_KEY" async></script>';
});

📚 Offizielle Dokumentation

Joomla!

Fügen Sie den Code über die Joomla! Administrator-Oberfläche ein:

  1. Gehen Sie zu "System" → "Website-Templates"
  2. Wählen Sie Ihr aktives Template
  3. Fügen Sie den Code im "Index.php" vor dem schließenden body-Tag ein
<script src="https://auth.accessibleai.eu/storage/v1/object/public/cdn/vae-loader-versioned.js" data-token="YOUR_API_KEY" async></script>

📚 Offizielle Dokumentation

TYPO3

Integration über TypoScript Setup:

page.footerData.1000 = TEXT
page.footerData.1000.value = <script src="https://auth.accessibleai.eu/storage/v1/object/public/cdn/vae-loader-versioned.js" data-token="YOUR_API_KEY" async></script>

📚 Offizielle Dokumentation

Drupal

Fügen Sie den Code über das Theme hinzu:

// In THEMENAME.theme (hook_preprocess_html)
function THEMENAME_preprocess_html(&$variables) {
  $variables['#attached']['html_head'][] = [
    [
      '#type' => 'html_tag',
      '#tag' => 'script',
      '#attributes' => [
        'src' => '/cdn/vae-loader-versioned.js',
        'data-token' => 'YOUR_API_KEY'
      ],
    ],
    'accessibleai_widget'
  ];
}

📚 Offizielle Dokumentation

Contao

Integration über das Layout:

  1. Layout → Theme → "Additional source code"
  2. Fügen Sie den Code im Footer-Bereich ein
<script src="https://auth.accessibleai.eu/storage/v1/object/public/cdn/vae-loader-versioned.js" data-token="YOUR_API_KEY" async></script>

📚 Offizielle Dokumentation

Shop-Systeme

ShopifyShopware 6WooCommerceMagento 2PrestaShopOpenCart

Shopify

Einbindung über das Theme‑Layout (layout/theme.liquid):

  1. Online Store → Themes → Aktives Theme → Actions → Edit code
  2. Datei öffnen: layout/theme.liquid
  3. Fügen Sie den Script‑Tag direkt vor dem schließenden </body> ein
<script src="https://auth.accessibleai.eu/storage/v1/object/public/cdn/vae-loader-versioned.js" data-token="YOUR_API_KEY" async></script>

Hinweise

  • Gilt global für die Storefront, da theme.liquid das Basislayout ist.
  • Nach dem Speichern die Storefront hart neu laden (Cmd/Ctrl+Shift+R).
  • Checkout‑Seiten können ohne Shopify Plus nicht beliebig angepasst werden; das Widget ist für die Storefront gedacht.

Shopware 6

Integration über Theme-Einstellungen:

  1. Erweiterungen → Themes → Ihr aktives Theme bearbeiten
  2. Unter "Javascript" den Code einfügen
<script src="https://auth.accessibleai.eu/storage/v1/object/public/cdn/vae-loader-versioned.js" data-token="YOUR_API_KEY" async></script>

📚 Offizielle Dokumentation

WooCommerce

Nutzen Sie die WordPress-Integration oder fügen Sie den Code direkt in Ihr Theme ein:

// In functions.php Ihres Child-Themes
add_action('wp_footer', function() {
  if (function_exists('is_woocommerce') && (is_woocommerce() || is_cart() || is_checkout())) {
    echo '<script src="https://auth.accessibleai.eu/storage/v1/object/public/cdn/vae-loader-versioned.js" data-token="YOUR_API_KEY" async></script>';
  }
});

📚 Offizielle Dokumentation

Magento 2

Integration über Layout XML:

<!-- In app/design/frontend/[Vendor]/[theme]/Magento_Theme/layout/default.xml -->
<referenceContainer name="before.body.end">
    <block class="Magento\Framework\View\Element\Template"
           name="aai.widget"
           template="Magento_Theme::aai-widget.phtml"/>
</referenceContainer>

<!-- In app/design/frontend/[Vendor]/[theme]/Magento_Theme/templates/aai-widget.phtml -->
<script src="https://auth.accessibleai.eu/storage/v1/object/public/cdn/vae-loader-versioned.js" data-token="YOUR_API_KEY" async></script>

📚 Offizielle Dokumentation

PrestaShop

Integration über Theme-Anpassung:

  1. Themes → Ihr aktives Theme → "HTML Head Code"
  2. Fügen Sie den Script-Code ein
<script src="https://auth.accessibleai.eu/storage/v1/object/public/cdn/vae-loader-versioned.js" data-token="YOUR_API_KEY" async></script>

📚 Offizielle Dokumentation

OpenCart

Integration über Template-Modifikation:

  1. Bearbeiten Sie catalog/view/theme/[YOUR_THEME]/template/common/footer.twig
  2. Fügen Sie den Script-Code vor dem schließenden body-Tag ein
<script src="https://auth.accessibleai.eu/storage/v1/object/public/cdn/vae-loader-versioned.js" data-token="YOUR_API_KEY" async></script>

📚 Offizielle Dokumentation

Weitere Docs-Seiten

← Zurück zur Developer Docs ÜbersichtArchitecture & Data Flow →Security & Data Privacy →Performance Benchmarks →AI Transparency →

Lösungen nach Zielgruppe