Embed a calendar, a diagram, a chart or another tool on my site
Most of what you want on a page is words and pictures, and bernard writes those for you. Every so often you want something a page cannot draw on its own: a flowchart of how you work, a chart of last year’s numbers, your brochure readable without downloading it, a photo gallery that opens full screen.
The prompt
“Add a flowchart to [the page] showing [the steps]. Match our colours, and show me before it goes live.”
Signed in, Get my prompt fills in your site for you. Otherwise press Copy and fill in the [bracketed] parts. First time? Connect your AI to bernard once: Use your own AI (opens in a new tab).
Those need a small program running in the visitor’s browser, and that is the one place bernard is careful. Code pasted into a page is the main way a website becomes unsafe, so bernard removes any that is pasted in, every time, whoever pasted it. What it does instead is keep a checked list.
What a checked list means
A tool gets on the list when someone at bernard has read the maker’s own instructions, decided the tool only draws things rather than collecting anything about your visitors, and pinned the exact version your site loads. Every night bernard checks which version each of your pages loads against the published list of known weaknesses, moves a page forward when one is found, and tells you it did. The pinned version only ever moves forward.
That nightly check is about versions of the tools on the list, and nothing else yet. Links, embeds and forms are checked by hand today.
So you get the useful half of “you can add anything to a website” without the half that gets sites broken into.
What is on the list
Ten tools work today. Each has its own page with the words to use:
| Tool | What it does |
|---|---|
| Add a Mermaid diagram to my site | Mermaid draws flowcharts, timelines, sequence diagrams and pie charts from a few lines of plain text. |
| Embed PDFObject document viewer on my site | PDFObject puts a PDF you have uploaded straight onto the page, so a visitor reads your brochure, menu or price list without downloading anything. |
| Embed Chart.js on my site | Chart.js turns a small table of numbers into a bar, line or pie chart that draws itself on the page. |
| Embed GLightbox image lightbox on my site | GLightbox makes a photo open full screen over the page when someone clicks it, with arrows to move through a gallery. |
| Embed Swiper carousel on my site | Swiper turns a set of photos or quotes into a carousel a visitor can swipe on a phone or click through on a laptop. |
| Embed Lottie animations on my site | Lottie plays a small designer-made animation, such as a moving icon or an illustrated scene, at a fraction of the weight of a video. |
| Embed AOS scroll animations on my site | AOS makes a section fade or slide into view as a visitor scrolls down the page. |
| Embed MathJax equations on my site | MathJax sets mathematics properly on the page, so a formula looks like a formula rather than a line of symbols. |
| Embed Prism code highlighting on my site | Prism colours code samples on your page the way a code editor does, so a tutorial or a developer guide is readable rather than a grey wall. |
| Embed highlight.js code highlighting on my site | highlight.js colours code samples on your page and guesses the language for you, so you do not have to label every block. |
Eight more are checked and waiting. They all set cookies or load something from another company, so they have to wait for bernard’s cookie-consent system to learn one more category. bernard will tell you when they switch on.
| Tool | What it does |
|---|---|
| Embed Stripe Buy Button on my site | A Stripe Buy Button takes a payment for one product or subscription straight from your own Stripe account. |
| Embed PayPal hosted buttons on my site | A PayPal hosted button lets a visitor pay you through PayPal without leaving the page. |
| Embed Calendly booking on my site | Calendly shows your live availability on the page and lets a visitor book a slot themselves. |
| Embed Giscus comments on my site | Giscus puts a comment thread under a page, backed by a GitHub discussion you own. |
| Embed Elfsight widgets on my site | Elfsight builds ready-made widgets such as an Instagram feed, a reviews wall, a countdown or an enquiry form. |
| Embed Trustpilot TrustBox on my site | A Trustpilot TrustBox shows your star rating and your latest reviews on the page, pulled live from Trustpilot. |
| Embed Weglot translation on my site | Weglot translates your whole site into other languages and adds a language switcher. |
| Embed Cloudflare Turnstile on my site | Turnstile is Cloudflare’s replacement for the old picture puzzles, sitting inside a form to keep spam out of your inbox. |
Asking for one
Say what you want the page to do, not which tool to use:
Add a flowchart to the How it works page showing enquiry, quote, booking and delivery. Match our colours.
Put our brochure PDF on the Downloads page so people can read it without downloading it.
Add a bar chart to the Results page showing our four courses and how many students finished each.
bernard picks the tool, writes the checked version, and puts it on a preview. Nothing reaches your live site until you approve it. If you want a change - different colours, a step added, the chart as a pie instead - say so and look again.
Asking for something that is not on the list
Name it anyway. bernard files the request with the tool’s name and a link to its documentation, then tells you it has gone to the people who build bernard, and carries on with the rest of what you asked. You are not stuck waiting: say what the page is for and there is usually a way to get most of it today.
The one answer you will never get is “here is a small script” - bernard does not write code for your site, on purpose. See What can my site do with JavaScript? for the fuller picture of what your site can and cannot do, and why.
Questions people ask
- Do I need to paste in any code?
- No, and please don’t. Pasted code is removed for safety, every time. Describe what you want instead and bernard writes the checked version for you, on a preview you approve before it goes live.
- Why is there a list at all - can’t I have any tool I like?
- Anything that runs on your site runs in your visitors’ browsers, so it has to be worth trusting. Each tool on the list has been read against the maker’s own instructions and pinned to a checked version, and every night bernard checks which version each of your pages loads against the published list of known weaknesses.
- What if the tool I want isn’t on the list?
- Ask for it anyway. bernard passes the request to the people who build bernard, with the name and the link, and tells you it has been asked for. Some are added within days; a few are turned down, and you get the reason.
- Will it slow my site down?
- A little, because the visitor’s browser fetches the tool. bernard only puts one on a page that needs it, and a diagram or a chart is far lighter than the picture of one.
- Can I change a diagram later?
- Yes. A diagram is written as a few lines of plain text, so changing a step is as easy as changing a sentence. Ask, look at the preview, approve.
- Does this work on phones?
- Yes. Every tool on the list draws itself to fit the screen. Look at the phone preview before you approve if the page matters on mobile.