Operational host page

ASX product support, embedded on a local storefront host.

This demo behaves like a minimal asx.eu page. The chatbot is mounted through the public widget script so we can validate layout, responses, product cards, FAQ answers and message flow end to end.

Focus

FAQ, product and order support

Validation

Real widget, real API, local browser QA

Host behavior

The widget should stay coherent while the host page keeps its own scroll and layout rhythm.

Use the prompts on the right, then inspect the widget for a single header, aligned controls, a fixed composer and a stable transcript area.

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: What are your delivery times?
FAQ: What is your return policy for damaged goods?
Product: I need black nitrile gloves.
Product: Can you find safety shoes from New Balance?
General: What can you help me with on ASX?

Embed contract

This is the exact local snippet used for validation. The page intentionally hosts the real widget rather than a mock component.

<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: 'en',
    mode: 'floating'
  });
});
</script>

Embedded validation

Floating 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

Floating mode remains available because the final ASX storefront will most likely use a floating launcher on the live site.