Templates and examples
Ready interfaces and blocks you can copy, recolour and connect to your own site: an AI sales chat, analytics blocks and a dashboard page. Plain HTML, CSS and JavaScript, no libraries and no external addresses.
What is inside
AI sales chat
Three interfaces - as on our site, minimal, dark; your own button with an embedded block.
Analytics blocks
Tiles, a daily line, sources, funnel, visibility and Pulse from analytics API responses; a Chart.js variant.
Your own dashboard
A server proxy in Node.js and PHP, the API key stays on the server, and a page of four blocks.
How to use
- Each page has a live preview marked "example" and the code in tabs. The preview is built from the same code the tabs show, so they cannot diverge.
- Colours, rounding and fonts come from CSS variables (
--ch-*for the chat,--ab-*for the blocks): change the values, there is no need to touch the structure. - The Light / Dark switch above a preview shows both themes; in the code the dark theme follows the system and the data-theme attribute.
- The code loads nothing from outside: no libraries, fonts or images from foreign addresses.
- The data in the examples is made up. Real figures come from your account.
The API key and the browser
The chat works without a key: the channel is identified by its id. Analytics needs a key with the analytics:read and dashboards:read scopes - it is kept only on your server, and the browser calls your proxy.