Skip to content

Setting up Shelly on your website and in your inbox

One script tag installs the widget on WordPress, Squarespace, Wix, or Shopify, and the email agent has its own address your mailbox forwards to.

Installing the widget

The install is one line. Paste the tag below into every page of the site, in the head or just before the closing body tag, and the launcher appears at the bottom right once the bot is live. The key in the tag is the bot's public key; the bot page in the dashboard shows this same tag with your key already in it, beside a copy button.

HTML
<script src="https://shellygpt.com/widget.js" data-chatbot="pk_live_your_key" async></script>

The script loads after the page's own content and draws the launcher inside a shadow root, so the site's styles do not touch it and it does not touch the site's. Until the bot is live the tag stays silent: the launcher renders only in a browser that has opened the preview link, so the tag can go in early and you can see it on your own homepage before anyone else does.

The bot page lists the sites allowed to load it. A request from an address that is not on the list, usually www.yoursite.com when only yoursite.com was allowed, is refused until the address is added.

WordPress

The tag goes in the theme header, either pasted into the theme's header file or, safer, through a header-and-footer scripts plugin, which keeps it in place when the theme updates. Both need an administrator login. If the site runs a caching plugin, clear the cache after saving, or visitors keep getting the old pages without the tag.

Squarespace

Squarespace has a code injection setting with a header box and a footer box, and the tag goes in either one; from then on every page carries it. Save, then open the live site in a private window and look for the launcher at the bottom right.

Wix

Wix takes the tag through its custom code setting, which asks where to load it and on which pages; choose the end of the body and all pages. Wix only allows custom code on a paid plan with a domain connected. Publish the site, then check the live domain.

Shopify

On Shopify the tag goes in the theme's layout file, theme.liquid, through the theme code editor, just before the closing body tag, and the whole storefront picks it up. Checkout pages are the exception, since they do not load the theme layout. Duplicate the theme before editing so there is a copy to go back to.

Google Tag Manager

When nobody has the keys to the site but someone has Tag Manager, add the script as a Custom HTML tag fired on all pages and publish the container. It is the fallback and it works, with one cost: the widget waits for Tag Manager to load, so the launcher appears a moment later than it would from a direct install.

A site Gray Sand manages

On a site Gray Sand manages the tag goes in the layout and Dan puts it there during setup, so there is nothing to paste.

Connecting the email agent

Each agent has its own address on agent.shellygpt.com, chosen when the agent is made. You can give the address out directly, put it on a contact page, or keep your shared mailbox and forward to it: a rule in Google Workspace, Microsoft 365, or any other host sends a copy of what arrives at info@ to the agent's address. You keep the mailbox, the password, and the host.

On Microsoft 365, redirect rather than forward: a redirect leaves the original sender in the headers, so the draft is addressed to the customer and not to your own mailbox.

What gets a draft

Anything to the agent's address that a person wrote. Automated mail is skipped with the reason shown in the channel log: bounces, autoreplies, anything carrying a bulk or auto-submitted header, mail from another agent's address, and any sender who is not on your allowed list when you keep one. The allowed list takes addresses or whole domains, up to two hundred of them. Drafts are also capped per sender per hour, so two autoresponders cannot talk all night.

Every draft waits on the Drafts page in the dashboard. Approve and send sends it from the agent's address into the customer's own thread, with your BCC list copied so your mailbox holds the sent copy. Edit changes the words first; Discard drops it.

Auto-send

Auto-send is a switch on the email channel page, per agent, and it starts off. With it on, a reply goes out without review only when the sender's domain passed SPF, the check a receiving mail server records when a message really came from the domain it claims. A message that fails the check is held on the Drafts page with the reason, for a person to decide. Turn the switch off and every reply waits for approval again.

The search box is a second script tag with its own key, from the search page in the dashboard. It draws itself inside a shadow root like the widget, with the placeholder and accent color you set there, and it searches the same pages the agent answers from.

HTML
<script src="https://shellygpt.com/search.js" data-search="ps_live_your_key" async></script>

Every query runs a vector search and a keyword search together. The vector pass finds "where do I leave my car" when the page says parking; the keyword pass finds a plan name or a street name exactly. A result that only barely matches by meaning and not at all by word is dropped rather than shown.

AI answers are a switch on the search page. With it on, a visitor can ask for an answer to their query above the results, written only from the pages the search found, with the page linked. The dashboard lists recent searches and the ones that found nothing, which is the list of pages the site is missing.

What the agent reads

Three kinds of source. A whole website, which Shelly reads from its sitemap and links, on a daily or weekly schedule you choose, obeying the site's robots.txt. A single web page, for the one page on someone else's site that matters, such as an insurer's plan list. And pasted text, for the facts a website never quite states: hours, parking, the cancellation policy, the answer to the question the front desk gets every day.

Each page is named from its title, or from its address when the title is missing, and that name is what a source link shows under an answer. Pages are split into passages of a few hundred words for search. An agent reads the sources you attach to it and nothing else, and the agent itself is drafted from a plain description of the business, which you can edit before it goes live.

Accessibility of the widget

The launcher is a button and the panel is a dialog. The input takes focus when the panel opens, Tab moves through the controls, and Escape closes it and returns focus to the launcher. Every icon that stands alone carries a label.

The message list is a live region, so a screen reader hears each answer once it settles rather than word by word as it streams, and it is marked busy while an answer is being written. Text inside the widget is set in the site's own system font, so it looks native on any page and downloads nothing.

The accent is the one color you can change. The launcher, the send button, and the focus ring take it, and the text on it is white or ink, whichever passes the contrast check against your color. Everything else is a fixed neutral ramp.

The launcher can ask to be noticed with a ping, a glow, a rainbow sweep, a pulse, a shake, or a glitch, or with nothing at all. Whichever you pick plays a few times in a visitor's first two minutes on a page, stops for good once they open the chat, and never plays for a visitor whose device asks for less motion.

API and MCP

An API, outbound webhooks, and an MCP server are planned for a later release, and none of the three is available today. The plan is an endpoint that takes one question and returns one answer with its citations, a webhook that fires when a conversation needs a person, and an MCP server so an assistant on your desk can ask your agent what your visitors ask it. When they ship, this page will carry the reference and the changelog will say so. Until then the dashboard is the only way in.