How to Embed a Chatbot on Cargo (Cargo3 / Cargo2 Guide)

Step-by-step instructions to add a chatbot to a Cargo or Cargo Collective site — HTML embed block, site-wide head code, z-index fixes for design-forward templates, and a no-code fallback.

Does Cargo allow custom HTML and script embeds?

Cargo supports custom HTML blocks and a site-wide head code editor on paid plans, giving you two distinct ways to embed a chatbot script. The site-wide method — pasting into the head section via Edit Code or Edit Design — loads the widget on every page automatically. The HTML content block method places the widget on a single project or page.

Cargo is built for designers, artists, photographers, and studios. Its templates often use full-bleed layouts, custom cursors, and animated overlays that can interact with third-party widget z-index — something to watch for when you verify the install, but not a barrier to embedding.

Cargo embed methods at a glance
MethodScopeCargo versionBest for
Edit Code head sectionSite-wideCargo3Most sites — widget loads everywhere
Edit Design head areaSite-wideCargo2 (legacy)Legacy Cargo2 accounts
HTML content blockSingle page / projectCargo3 and Cargo2Portfolio projects where you want targeted capture
Hosted Knobot page (knobot.org/c/your-business)Off-site linkAny / no code neededFree trial accounts or when code access is unavailable

Which Cargo plans support the head code editor?

Custom code access — including the Edit Code head section in Cargo3 and the Edit Design head area in Cargo2 — requires an active paid Cargo subscription. Free trial accounts can design a site but cannot publish or use the code editor.

If your site is on a free trial and you need a chatbot immediately — for example, to capture commission or booking inquiries while your site is still in development — use the hosted Knobot page at knobot.org/c/your-business and link to it from your bio or contact section. This requires no code access and works regardless of plan.

How do you add a chatbot site-wide on Cargo3?

The Cargo3 Edit Code panel is the standard path for site-wide script injection. The steps below add the chatbot to every page on your site in a single paste.

  1. 1

    Copy your Knobot embed script

    In your Knobot dashboard, go to Widget → Install. Copy the one-line script tag. It looks like: <script src="https://www.knobot.org/widget.js" data-key="YOUR_KEY" async></script> — replace YOUR_KEY with the key shown in the dashboard.

  2. 2

    Open your Cargo3 site in the editor

    Log in at cargo.site and click into the site you want to edit. You will land in the Cargo3 editing interface.

  3. 3

    Navigate to Edit Code

    In the Cargo3 sidebar or top menu, find the "Edit Code" option. This opens the site code editor where you can access head, body, and stylesheet sections.

  4. 4

    Paste the script tag into the head section

    Locate the <head> section in the code editor. Paste your Knobot script tag just before the closing </head> tag. Adding the async attribute (already included in the Knobot snippet) prevents the script from blocking page render.

  5. 5

    Save your changes

    Click Save (or the equivalent button) within the code editor to store your changes.

  6. 6

    Publish the site

    Click Publish in the Cargo editor. Cargo deploys the change to your live site. The chatbot script will load on all pages after the next visitor page load.

  7. 7

    Verify on the live published URL

    Open your published Cargo URL in a new browser tab — not the in-editor preview, which does not execute third-party scripts. The Knobot chat bubble should appear in the bottom-right corner. Send a test message to confirm the bot responds.

How do you add a chatbot site-wide on Cargo2 (legacy)?

Cargo2 accounts use a different editing interface but support the same head code approach. The path is slightly different from Cargo3.

  1. 1

    Open Edit Design in the Cargo2 sidebar

    In the Cargo2 editing interface, look for "Edit Design" in the left sidebar. This opens the design and code editing panel.

  2. 2

    Find the head code section

    Inside Edit Design, locate the head code area — often labeled "Custom Head Code" or simply accessible as the <head> portion of the design template. Some Cargo2 themes present this as a text area near the top of the design editor.

  3. 3

    Paste your script tag

    Paste your Knobot <script> tag into the head code field. Save the design.

  4. 4

    Publish and verify

    Publish the site and visit your live URL in a separate tab. Confirm the chat widget appears. If you are unsure whether your Cargo2 theme supports head code injection, contact Cargo support at support.cargo.site.

How do you embed a chatbot on a single Cargo page or project?

Cargo does not have a per-page code injection panel like some other builders. However, both Cargo3 and Cargo2 support HTML content blocks — you can drop a raw HTML block directly into any page or project and paste the script tag there. The widget will initialize only where that block is rendered.

  1. 1

    Open the page or project in the Cargo editor

    Navigate to the specific page or project where you want the chatbot to appear.

  2. 2

    Add an HTML content block

    Insert a new content block and select the HTML type. Cargo3 presents this as an HTML/Embed block in the content block picker. Cargo2 has a similar "HTML" or "Code" block option.

  3. 3

    Paste your script tag into the HTML block

    Paste the full Knobot <script> tag into the HTML content block. The block renders the script when the page loads.

  4. 4

    Position the block (optional)

    Because the chatbot renders as a fixed-position floating bubble, the visual position of the HTML block in your page layout does not affect where the widget appears on screen. You can place the block at the bottom of the page layout.

  5. 5

    Save and publish

    Save the page and publish your site. The chatbot will appear on that page only when a visitor views it.

How do you embed Knobot on Cargo specifically?

Knobot's Premium plan ($79/month) includes 10,000 messages per month and runs on a RAG architecture (Voyage embeddings + Gemini Flash 2.5) that answers visitor questions grounded in your own site content. There is no plugin to install — just a single <script> tag.

For a Cargo portfolio or studio site, the value proposition is direct: visitors browse your work at night or on weekends when you are not available. Knobot captures commission inquiries, project briefs, booking requests, and contact details — and delivers them to your email so nothing falls through when your inbox is closed.

  1. 1

    Create a Knobot account and build your knowledge base

    Sign up at knobot.org. After creating your business profile, Knobot will crawl your Cargo site and build an initial knowledge base from your published content — your services, portfolio descriptions, pricing, and contact information.

  2. 2

    Customize the widget appearance

    In the Knobot dashboard, set the primary color, welcome message, and lead-capture fields (name, email, project type). You can match your Cargo palette precisely. All customization changes propagate to the live widget automatically — no re-paste needed.

  3. 3

    Copy the embed snippet

    Go to Widget → Install in the dashboard. Copy the full script tag: <script src="https://www.knobot.org/widget.js" data-key="YOUR_KEY" async></script>

  4. 4

    Register your domain in the dashboard

    Still in Widget → Install, add your Cargo site's domain (both apex and www variants if applicable). This domain whitelist ensures the widget loads on your site and not on unauthorized domains.

  5. 5

    Paste into Cargo's head section

    Follow the site-wide steps above for Cargo3 (Edit Code) or Cargo2 (Edit Design), paste the snippet, save, and publish.

  6. 6

    Test lead capture with a live conversation

    Open your published site, start a chat, and submit a test inquiry. Confirm the lead appears in your Knobot dashboard under Conversations, and that the email notification arrives in your inbox.

How do you fix z-index conflicts on design-forward Cargo templates?

Cargo is designed for creative professionals, and its templates reflect that — full-bleed images, animated transitions, custom cursor overlays, and sticky navigation elements are common. These design layers often use high z-index values that can visually cover the chatbot bubble.

The fix is a single CSS rule added to the site's stylesheet section:

[data-knobot-widget] {
  z-index: 99999 !important;
}

In Cargo3, add this rule in the Edit Code stylesheet section (separate from the head section). In Cargo2, you can add it inside a <style> block in the head code area. The data-knobot-widget attribute targets Knobot's widget wrapper element specifically, so the rule will not unintentionally affect other elements.

What should you do if the chatbot script does not load on the live site?

If the chatbot bubble does not appear after publishing, work through these causes in order before assuming the embed is broken.

Does Cargo's HTTPS or CSP setting block third-party scripts?

All published Cargo sites enforce HTTPS, which means your chatbot vendor must also serve assets over HTTPS. Any script loaded over plain HTTP will be blocked by the browser as mixed content — a browser security rule, not a Cargo restriction. Knobot serves all assets over HTTPS, so mixed content is not a concern.

Content Security Policy (CSP) headers instruct the browser to refuse scripts from origins not explicitly listed in the policy. Standard hosted Cargo sites do not apply a restrictive CSP that would block head-injected scripts — the code you paste into the head section runs normally on Cargo's hosting. If you are using a custom domain with a CDN or reverse proxy in front of your Cargo site (uncommon, but possible for studios with complex infrastructure), verify that any server-side CSP headers allow script-src www.knobot.org.

For the vast majority of Cargo users — a standard hosted site with a custom domain pointed at Cargo's servers — HTTPS and CSP are not factors. Paste, save, publish, and the script runs.

What is the no-code fallback if you cannot access Cargo's code editor?

If you are on a Cargo free trial, if a client's account restricts your editing permissions, or if you want a shareable chat link independent of the website, Knobot's hosted page requires no embed at all.

The hosted page is also useful for Cargo users who display their portfolio across multiple domains or subdomains — rather than embedding the widget on each one separately, you can route all inquiry traffic to a single hosted URL and manage conversations in one place.

Frequently asked questions

Does every Cargo plan allow custom HTML and head code?

Cargo requires a paid subscription to unlock custom code features. The free trial lets you design your site, but publishing and accessing the site-wide head code editor (Edit Code) requires an active paid plan. If you are on a legacy Cargo2 account, the path to the code editor differs slightly from Cargo3 — look for "Edit Design" in the sidebar rather than the Cargo3 "Edit Code" option — but both expose a head section where you can paste a script tag.

Will the chatbot widget appear inside the Cargo editor preview?

No. The Cargo editor loads a sandboxed preview environment that does not execute most third-party scripts. The chatbot widget will only appear on your published, live site. Always verify by opening your published URL in a separate browser tab — not by checking the in-editor preview.

What if the chatbot bubble hides behind a full-bleed image or overlay element?

Cargo templates frequently use high z-index values on overlays, custom cursors, and full-bleed panels. If the chat bubble disappears behind a layer, add a CSS rule targeting the [data-knobot-widget] attribute with a z-index of 99999 and !important. In Cargo3, you can add this CSS in Edit Code under the site-wide stylesheet section. In Cargo2, use Edit Design and add a <style> block in the head section.

Can I add the chatbot to only one project or page on Cargo?

Cargo does not have a per-page code injection panel equivalent to Squarespace or Wix. The site-wide head code applies to all pages. If you want the chatbot on a single page only, the practical workaround is to use an HTML embed block on that specific project or page — paste the script tag directly into an HTML content block. The widget will initialize only where that block renders.

Does Cargo enforce HTTPS? Will a mixed-content warning block my chatbot?

Yes, all published Cargo sites use HTTPS. Any chatbot widget served over plain HTTP will be blocked by the browser as mixed content — this is a browser-level security rule, not a Cargo restriction. Knobot serves all assets over HTTPS, so this is not an issue when using Knobot. If you use a different chatbot provider, confirm their widget script URL starts with https://, not http://.

My Cargo site has a custom cursor. Will the chatbot widget interfere with it?

Custom cursors in Cargo templates typically operate at a very high z-index via JavaScript. In most cases the cursor and chatbot widget coexist without conflict because the cursor is rendered in a separate DOM layer. If the cursor element visually overlaps the chat button, apply the z-index CSS override described above. The chatbot click target will remain functional as long as nothing with pointer-events: none is placed directly over it.

What is the hosted Knobot page option and when should I use it?

If you cannot access Cargo's code editor — for example, if you are on a free trial, if a collaborator does not have edit permissions, or if your plan does not yet include custom code — Knobot provides a hosted chat page at knobot.org/c/your-business. You can share this URL directly in your Cargo contact section, bio link, or email signature. No script tag, no code access required.

Sources