Install guide
Adding a chat assistant to a blog on Blogger
Blogger gives you the whole theme file in one editor, which is unusually direct for a hosted product. The catch is that a Blogger theme is XML rather than loose HTML, so the editor is stricter about your markup than a browser would ever be, and it refuses the save rather than fixing it for you.
The tag
<script src="https://cdn.askably.xyz/w.js" data-key="pk_live_YOUR_KEY" defer></script>Your own key replaces the placeholder. You will find it on the install tab of the assistant.
The origin the page is served from has to be on the allowlist for that assistant, or nothing renders and the browser console says which origin was refused. An apex domain and its www are two different origins to a browser, so list both, along with any staging or preview host you want it to work on.
Where it goes on Blogger
Theme in the left menu, then More under My theme, then Edit HTML. Paste immediately before the closing body tag.
Every Blogger blog, on the free service and on a custom domain alike. There is no plan to upgrade and no feature to switch on, because theme editing is part of the product for everyone.
Step by step
- 1Sign in to Blogger and choose the blog you want to change.
- 2In the left menu click Theme.
- 3Under My theme click More, then Edit HTML. The whole theme file opens in an editor.
- 4Before you change anything, use the same menu to keep a copy of the current theme. A theme file is one document, and a bad paste is much easier to undo from a copy than from memory.
- 5Scroll to the very bottom of the file and find the closing body tag. Paste the tag immediately above it, outside any surrounding section or widget block.
- 6Click Save. If the editor rejects the save with a parse complaint, the cause is almost always the markup around your paste rather than the tag itself.
- 7Open the blog in a private window and confirm the launcher appears on a post page as well as on the home page.
What goes wrong on Blogger
The editor parses the theme as XML before it saves anything
A Blogger theme is an XML document, not an HTML page, and the editor validates it as such. That means every element has to be closed, every attribute has to have a value, and a bare ampersand anywhere in the file is an error. A browser would forgive all three. Blogger will not save the file at all.
If the save is refused, look first at whether an attribute is standing on its own without a value, and give it one. Then look at whatever was already on the lines around your paste, because a theme that has been edited by hand before often has a latent problem that only surfaces when somebody next tries to save.
Applying or restoring a theme replaces the entire file
Blogger does not layer your edits on top of a theme. The theme is one file, and picking a different theme from the gallery, or restoring a copy you saved earlier, writes a whole new file over the top. Everything you added by hand goes with it, silently and immediately.
The characteristic report is a widget that worked for a year and vanished on the afternoon somebody tried a new look. Keep the tag written down next to your theme copy, and re-paste it after any theme change.
Keep it outside the section and widget blocks
Blogger themes are built from its own section and widget elements, and the contents of those are managed by the Layout screen. Markup you paste inside one of them sits in territory Blogger regenerates when somebody adds, moves or removes a gadget.
Paste as a direct child of the body element, on the line above the closing body tag, where nothing in the Layout screen reaches. The tag then survives every gadget change anybody makes.
Origins to allowlist
These are the origins a Blogger site is typically served from. List every one you want the assistant to answer on, including the ones only you visit.
- https://yourblog.blogspot.com
- https://yourdomain.com
- https://www.yourdomain.com
How the tag behaves, wherever you put it
The rest of this is the same on every platform, so it is worth reading once rather than on each guide.
| One tag, nothing else | There is no second file, no stylesheet and no package to install. The tag is the whole install. |
|---|---|
| Where it goes | Immediately before the closing body tag. It works in the head too, because it defers, but the body keeps it out of the way of anything that measures render order. |
| data-key is required | Without it the loader stops and writes a warning to the browser console rather than rendering anything. |
| It finds itself | The loader reads the tag it was loaded from, and falls back to the first tag on the page carrying a data-key. Platforms that move or re-inject the tag do not break it. |
| It installs once | A second copy of the tag on the same page is ignored, so a template that renders twice does not produce two launchers. |
| Assets follow the tag | Everything else it needs is fetched from the same origin the tag was served from, so a proxy or a private domain needs no extra configuration. |
| The panel loads late | Only the small launcher is on the page at first. The conversation panel is fetched the first time a visitor opens it, in its own frame. |
| Styles cannot collide | The launcher renders inside a closed shadow root and the panel inside a frame, so nothing on the host page can restyle either, and neither can restyle the host page. |
Taking it off again
Open Theme, then More, then Edit HTML, delete the line, and save. Nothing else was installed, so that is the whole removal.
Before you remove it
- Removing the tag stops the widget on that site. It does not delete the assistant, its material, or the enquiries it has already collected.
- If you are moving the widget to a different host rather than retiring it, add the new origin to the allowlist before you remove the old tag, or there is a window where neither works.
Questions
- Can I add it through a gadget instead of editing the theme?
- You can put markup in a gadget, but it is the worse option here. A gadget lives in a layout region with a position and a size, whereas the launcher wants to sit in a corner over the page. Editing the theme puts the tag where a floating element belongs.
- Does the blogspot address need allowlisting if I use a custom domain?
- Only if you want the widget to work when you open that address yourself. Visitors on the custom domain never see it. A browser treats the two as separate origins, so whichever ones you actually load have to be listed.
- Will it appear on the mobile version of the blog?
- It appears wherever your theme is used to build the page. Check a post on a phone before you assume, because older themes carry a separate mobile arrangement and it is worth seeing with your own eyes rather than reasoning about it.
- What can it answer for a blog?
- Whatever your posts and pages say. Point the crawl at the blog and let it read the archive, which is usually far larger than the author remembers and full of questions that were answered years ago and never found again.
Keep reading
- Install on WordPressA code snippets plugin, or a small plugin of your own, hooking wp_footer. Not Appearance, then the theme file editor.
- Install on GhostSettings, then Code injection, then the Site Footer box. The alternative is default.hbs in a custom theme.
- Install on DrupalA small custom module attaching a library, an asset injection contributed module, or html.html.twig in a custom theme. Not a custom block.
- Every install guideThe same one line of HTML, and where it goes on each platform.
Try it on your own material
Upload a document or point it at your site, paste one line of HTML, then ask it something only your business could answer.