Operative Host-Seite

ASX Produktberatung, eingebettet auf einer lokalen Storefront-Seite.

Dieses Demo verhaelt sich wie eine minimale asx.eu Seite. Der Chatbot wird ueber das oeffentliche Widget-Script eingebunden, damit wir Layout, Antworten, Produktkarten, FAQ-Treffer und den kompletten Nachrichtenfluss real validieren koennen.

Focus

FAQ, product and order support

Validation

Real widget, real API, local browser QA

Host behavior

Das Widget muss sauber im Host leben, waehrend die Seite ihren eigenen Scroll und ihren eigenen Rhythmus behaelt.

Nutze die Prompts rechts und pruefe danach das Widget auf genau einen Header, sauber ausgerichtete Controls, einen festen Composer und einen stabilen Transcript-Bereich.

Page content

ASX essentials

Workwear, protective gear, safety shoes, gloves, PPE and operational catalogue support. The page is intentionally simple so spacing, overlay behavior and widget alignment are easy to judge.

QA Prompts

FAQ: Wie lang ist die Lieferzeit?
FAQ: Wie funktioniert die Rueckgabe bei beschaedigter Ware?
Produkt: Ich suche schwarze Nitrilhandschuhe.
Produkt: Finde mir Sicherheitsschuhe von New Balance.
Allgemein: Wobei kannst du mir bei ASX helfen?

Embed-Vertrag

Das ist exakt das lokale Snippet, das wir zur Validierung verwenden. Die Seite hostet bewusst das echte Widget und keine Mock-Komponente.

<script src="https://asx-api.catalogueflow.com/widgets/asx-chatbot.js" defer></script>
<div id="asx-chatbot-host"></div>
<script>
window.addEventListener('load', function () {
  window.ASXChatbotWidget.mount({
    target: document.getElementById('asx-chatbot-host'),
    apiBaseUrl: 'https://asx-api.catalogueflow.com',
    publishableKey: 'pk_asx_live_a627e9b8495994141d7365e7',
    locale: 'de',
    mode: 'inline'
  });
});
</script>

Embedded validation

Inline widget on a simple ASX host page

The chat below uses the real public script, the real local API and the actual ASX data migrated into the local runtime target. This is the page to use for desktop and mobile QA before production release.

Single header Fixed composer Scroll-safe transcript Connection status

Review points

Check that the widget has one header only, the message input stays pinned to the bottom, product cards align consistently and the transcript scroll never collapses the host layout.

Current mode

Inline embed is the default QA mode because it makes spacing, hierarchy and overflow easier to inspect.