Short answer: add an Embed element, set its type to code, paste the script tag, and choose the hidden display style so it runs without taking up space in your layout. Custom code on Carrd requires a paid plan. Publish, then check the live URL, because the builder preview does not run embedded code.
Carrd is a one-page builder, which simplifies everything
Most Carrd sites are a single page. That means the whole question of site-wide installation largely disappears: put the code on the page, and it is on your site.
If you have built a multi-page Carrd site, you add the embed element to each page you want it on. There is no global code field, but with the number of pages a typical Carrd site has, that is a minute of work rather than a project.
The install
Open your site in the Carrd editor. Add a new element and choose Embed.
In the element's settings, set the type to code rather than a URL or a hosted embed. A code field appears. Paste the entire script tag into it.
Then set the display style. Carrd's embed element offers an inline style, where the embed occupies space in the page flow, and a hidden style, where the code runs but the element itself renders nothing visible.
Choose hidden. A chat widget positions itself against the browser window, so it does not need a spot in your layout, and leaving the element inline can create a mysterious gap in an otherwise tight single-page design. Carrd sites live and die on their spacing.
Save, then publish.
Custom code needs a paid plan
Carrd's free tier does not include custom code embeds. This is not a hidden restriction, it is how Carrd is priced, and their paid tiers are inexpensive.
If you are on the free tier and the embed element will not accept code, that is the reason. Check Carrd's current site for what each tier includes rather than trusting a number in a blog post, since pricing changes.
Where to put the element
Because you are using the hidden display style, placement barely matters for appearance. But it matters slightly for load order.
Put the embed element at or near the bottom of the page. Code near the bottom runs after the browser has drawn your content, which keeps the widget from competing with your hero section for the first moments of the page load. On a Carrd site, where the entire pitch is often above the fold, that is worth caring about.
Verifying it went live
The Carrd builder preview does not reliably execute custom code. Do not judge the install from inside the editor, and do not panic when the preview shows nothing.
Publish the site. Open your live URL in a private browser window. The chat bubble should appear in a corner a moment after the page settles.
If it does not, view the page source and search for your script tag. Missing from the source usually means the element did not save, or you published a different version than the one you edited. Present but not rendering means a browser-side error, so open the console.
Test on a phone as well. Carrd sites are frequently viewed on mobile, and you want to confirm the bubble does not sit on top of a call-to-action button. If it does, move your button or adjust the widget position.
Common gotchas
You did not publish. Carrd stages changes. The live site does not update until you publish.
Free tier limitation. No custom code on the host's free tier.
Inline instead of hidden. Leaves a blank gap in your layout. Switch the display style.
Duplicated element. If you copied a section that already contained the embed, you now have two, and possibly two bubbles. Check your element list.
Overlapping the mobile call to action. Common on single-page sites where a sticky button lives in the same corner. Test on a real phone.
Custom domain not pointed yet. If you are testing a domain whose DNS has not propagated, you may be looking at an old site entirely.
What a chat widget does for a one-page site
Carrd sites are usually a single pitch: here is what I do, here is why, here is the button. They convert well because they are focused, and they lose people for exactly the same reason, since there is nowhere to go for the answer to a question the page did not anticipate.
That gap is what a chat widget fills. Somebody wants to know whether you work with their industry, whether you cover their area, what your turnaround is, or what happens after they click the button. On a longer site they would go hunting. On a one-pager they leave.
Because a Carrd site is short, training is quick: crawl it, then upload a knowledge file with the details you deliberately left off the page to keep it clean. That combination is unusually effective here, because the widget knows all the things the page could not afford to say.
Then capture. Collect a name and an email or phone number conversationally, or show an in-chat form with your own fields, and route it to your leads inbox with email or webhook notifications so you actually see it. More on the mechanics in lead capture and on the lead capture chatbot page. Plans are flat from $19 a month, listed on the pricing page, which suits a one-page site's budget.
Frequently asked questions
Will it slow down my Carrd site?
Not meaningfully. The widget loads asynchronously, so your page paints first. Placing the element low on the page helps further.
Can I match it to my Carrd design?
Yes. Widget Studio has eight themes, light and dark modes, three bubble shapes and a brand colour, which is usually enough to make it feel deliberate on a minimal one-pager.
Will it break my styling?
No. It renders inside a Shadow DOM, so your CSS and the widget's CSS cannot reach each other.
Do I need to know any code?
No. You are pasting a single line into a box. Most people are live in about ten minutes, and done-for-you setup exists if you would rather not.
What if I want it on a multi-page Carrd site?
Add the same hidden embed element to each page.