> For the complete documentation index, see [llms.txt](https://docs.crobox.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.crobox.com/how-to-guides/sagent/deploy.md).

# Deploy

Publish Sagent through website widgets, QR codes, and other entry points.

A deploy is the entry point that lets shoppers open Sagent. It connects the published experience to a website widget, QR code, or another customer-facing location.

Use **Deploy** to choose where Sagent appears and how conversations begin. Enable only the entry points you are ready to make available.

Sagent includes a default website entry. Open **Deploy** and select the **Default website entry** card to review it.

{% hint style="info" %}
You need at least one enabled deploy before publishing Sagent.
{% endhint %}

### Create and configure a deploy

{% stepper %}
{% step %}

#### Click + New Deploy

Select a deploy type from the default options:

* **QR Code:** Generates a QR code that opens Sagent.
* **Chat Widget:** Adds an icon or styled button that opens Sagent.
* **Inline Chat:** Displays the chat inside a selected website placeholder.
* **Question Chips:** Displays a title and suggested questions inside a selected website placeholder. Selecting a question opens Sagent.
* **Floating chat:** Docks a compact chat entry to the edge of the page, with suggested questions and a question field. No placeholder is needed.

Each default deploy type has its own settings. Select the type, then configure its tab-specific options.

{% tabs %}
{% tab title="QR Code" %}
Use a QR Code deploy for printed or digital touchpoints.

Save the deploy to activate its QR code. The **QR Code Preview** then provides these actions:

* **Copy Link** copies the Sagent URL.
* **Download PNG** downloads the QR code image.
* **Copy preview link** copies a preview URL.

You can manage the QR code later. This lets you update its destination without replacing the published asset.

<figure><img src="https://1240120646-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M6BXLJuZMkdXQg6osAC%2Fuploads%2Fg7QU3kVCWlRPfKZOUk0k%2Fqr-code-instore.png?alt=media&amp;token=950d2e5b-c81c-4bb8-9103-86e58a0bc83e" alt=""><figcaption></figcaption></figure>

{% endtab %}

{% tab title="Chat Widget" %}
Use a Chat Widget deploy to add a Sagent launcher to supported website pages. Place the icon in a page corner, such as the bottom-right corner. You can also style it as a button to match your website.

Configure the launcher in **Design Preview**:

* **Title** provides the accessibility label for the chat activation button.
* **Page Position** places the launcher in a page corner.
* **Label** adds optional text beside the icon, creating a labelled badge.
* **Shadow** sets the launcher elevation.

You can also set an icon, background colour, border radius, and custom CSS.

Set **Chat frame title** to an accessible title for the chat window. Screen readers announce it when focus enters the chat.

Enable **Allow camera access** when the chat needs photo capture. The browser asks the visitor before the chat accesses their camera.

Set **Chat opened announcement** to the message screen readers announce when the chat opens.

<figure><img src="https://1240120646-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M6BXLJuZMkdXQg6osAC%2Fuploads%2FiwnRw7CCNasYigRUwaTA%2Fchat-widget-plp.png?alt=media&amp;token=39273240-8151-487c-ae7c-4aaf5cb6885e" alt=""><figcaption></figcaption></figure>

{% endtab %}

{% tab title="Inline Chat" %}
Use an Inline Chat deploy to display Sagent inside a website placeholder. Select the intended placeholder in **Locations**.

When the selected flow is **Ask about a product**, choose the **Product source**. Use **Dynamic** when the page supplies the product context.

Configure these settings in **Design Preview**:

* **Title** provides the accessible title for the embedded chat. Screen readers announce it when focus enters the chat.
* **Reserved height (px)** holds space until the chat reports its own height. This prevents the page from shifting as the chat appears. The value only needs to be approximate.
* **Maximum width (px)** optionally caps the chat width. By default, the chat fills its placeholder. Set a cap when the page column needs one.
* **Full screen on mobile** opens the chat across the mobile screen. The visitor returns to the page when they close it. Disable this for an in-page conversation in a short section, where less space is available for replies.

You can also add custom CSS.

<figure><img src="https://1240120646-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M6BXLJuZMkdXQg6osAC%2Fuploads%2FCaut37odu3j7IuMrdVSZ%2Finline-chat-pdp.png?alt=media&amp;token=7039d871-5312-43f9-ac3f-fa1353b710ba" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Question Chips" %}
Use a Question Chips deploy to offer a subtle, in-page way into Sagent. Instead of showing the chat window, it displays a title with a row of suggested questions. Shoppers select a question, or type their own, and Sagent opens with that question already sent.

This works well on product detail pages, where shoppers often have a specific question but aren't looking for a chat.

Select the intended placeholder in **Locations**.

When the selected flow is **Ask about a product**, choose the **Product source**. Use **Dynamic** when the page supplies the product context.

Configure these settings in **Design Preview**:

* **Title** is the heading shown above the questions, such as "Ask anything about this pack".
* **Questions** sets the suggested questions shown as chips. Separate each question with a comma.
* **Ask a different question** sets the label of the chip that lets shoppers type their own question, such as "Type your own question".
* **Continue the conversation** sets the label shoppers see when they can return to a conversation they've already started.
* **Chat position** places the chat window that opens when a shopper selects a chip, such as bottom right.
* **Chip color** and **Chip text color** set the chip background and text colours.
* **Chat frame title** provides an accessible title for the chat window. Screen readers announce it when focus enters the chat.

You can also add custom CSS.

**Where the questions come from**

* **Product discovery:** Write the questions in **Questions**. They apply only to this deploy.
* **Ask about a product:** **Questions** starts with a copy of your product welcome message suggestions. Edit them for this deploy without changing the welcome message in the chat.

When a shopper interacts with the chips:

* **Selecting a question** opens Sagent and sends that question as the shopper's first message.
* **Ask a different question** opens Sagent so the shopper can type their own question.

{% hint style="info" %}
Keep questions short and specific, such as "Will this fit as carry-on?" Because commas separate the questions, avoid commas inside a single question.
{% endhint %}

<figure><img src="https://1240120646-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M6BXLJuZMkdXQg6osAC%2Fuploads%2Fm5ZM9FzYIc9D8hOQ5RZf%2Fimage.png?alt=media&amp;token=f35dd740-e784-4bf1-abec-daf47a992a76" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Floating chat" %}
Use a Floating chat deploy to give shoppers a prominent way into Sagent on high-traffic pages, such as your homepage or landing pages. It docks a compact chat entry to the edge of the page, showing suggested questions above a question field. Shoppers select a question or type their own, and Sagent opens with that question already sent.

Floating chat docks to the page by itself, so it doesn't need a placeholder. Use **Locations** to choose the page types where it appears.

Configure these settings in **Design Preview**:

* **Title** provides the accessible title for the chat. Screen readers announce it when focus enters the chat.
* **Dock position** sets where the chat docks on the page, such as **Bottom centre**.
* **Reserved height (px)** holds space until the chat reports its own height. This prevents the chat from jumping as it loads. The value only needs to be approximate.

You can also add custom CSS.

{% hint style="info" %}
Floating chat sits on top of your page content. Preview it on desktop and mobile to check it doesn't cover key content, such as hero buttons, cookie banners, or sticky navigation.
{% endhint %}

<figure><img src="https://1240120646-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M6BXLJuZMkdXQg6osAC%2Fuploads%2F2s8bODgfqmPJKH9IkZAQ%2Ffloating-widget-home%20(1).png?alt=media&amp;token=0959bb0c-b6e4-4d9a-a2bd-1aa06667a8ef" alt=""><figcaption></figcaption></figure>

{% endtab %}
{% endtabs %}
{% endstep %}

{% step %}

#### Choose a Sagent flow

Choose how this deploy starts a conversation:

* **Product discovery** starts the Guided Flow with the full catalogue.
* **Ask about a product** starts the Product Flow with a product in context. Search for and select the product that shoppers should discuss.
  {% endstep %}

{% step %}

#### Name the deploy

Add a clear name that identifies the deploy's purpose or placement. Add a description when your team needs more context.
{% endstep %}

{% step %}

#### Set targeting

Choose who can see the deploy. Add a condition or condition group, then select a filter type.

Use presets for common product and cart audiences. You can also target page, product, product-engagement, visitor, referrer, region, or session data.

Use **Locations** to limit the deploy to selected page types and apply the placeholder where it should appear (if required).
{% endstep %}

{% step %}

#### Configure content

The **Content** tab is available only for deploy types with editable content. Use it to localise available text and accessibility labels for each locale.

* **Generate Content** drafts the available fields, if relevant.
* **Generate Translations** creates translations for selected locales.
  {% endstep %}

{% step %}

#### Save, enable, and publish

Click **Save** to store the deploy configuration.

On the **Deploy** overview:

* Use the **Enabled** toggle to choose whether the deploy is available in the next published version.
* Use the deploy menu to **Edit**, **Duplicate**, or **Remove** it.

After saving, navigate to the **Versions** tab and publish a new Sagent version. Deploy changes become live only when that version is published.
{% endstep %}
{% endstepper %}

{% hint style="info" %}
Chat widget deploys require the `@crobox/chat-activations` dependency.
{% endhint %}

### Deploy best practices

<table data-card-size="large" data-view="cards"><thead><tr><th></th><th></th></tr></thead><tbody><tr><td><h4>QR code deploy</h4></td><td>Use a QR code deploy on in-store signage, product packaging, or promotional materials. It gives customers a direct path to Sagent when they need help choosing a product. Place the code near the relevant product category or decision point.</td></tr><tr><td><h4>Chat widget deploy</h4></td><td>Place a chat widget deploy where shoppers may need advice, such as product listing pages or product detail pages. It keeps Sagent available without interrupting the browsing journey. Position the widget consistently so customers can find it easily.</td></tr><tr><td><h4>Question chips deploy</h4></td><td>Use question chips on product detail pages when you want Sagent present without a chat window. Write questions around what shoppers ask most about that product type, such as size, fit, or compatibility.</td></tr><tr><td><h4>Floating chat deploy</h4></td><td>Use floating chat on your homepage or campaign landing pages, where shoppers are still deciding what they need. Pair it with the Product discovery flow so Sagent can help them narrow down the full range.</td></tr><tr><td><h4>Custom deploys</h4></td><td>Create tailored entry points that fit your visitors guided shopping journey, using Crobox's existing components and placeholders. Explore possibilities with your Customer Success Manager during onboarding.</td></tr><tr><td><h4>Start with focused targeting</h4></td><td>Start with a limited audience and selected locations. Test the deploy before expanding its reach.</td></tr></tbody></table>

### Frequently asked questions

<details>

<summary>What is the difference between Product Flow and Guided Flow?</summary>

Product Flow starts with a specific product in context. Guided Flow starts with the full catalog.

</details>

<details>

<summary>What is the difference between Inline Chat, Question Chips, and Floating chat?</summary>

Inline Chat shows the full chat window inside a page placeholder. Question Chips shows only a title and suggested questions inside a placeholder, and opens Sagent when a shopper selects a question or chooses to type their own. Floating chat docks a compact entry with suggested questions and a question field to the edge of the page, without needing a placeholder.

</details>

<details>

<summary>Can I remove certain entry points periodically?</summary>

Yes. Disable specific deploys by toggling the enabled indicator off, and then publish a new version of Sagent within the **Versions tab.** You can re-enable it later without recreating the deploy.

If you'd like to completely unpublish the Sagent periodically rather than a single entry point, you can head straight to the **Versions tab** and un-publish the Sagent. This can easily be re-published when ready.

</details>

<details>

<summary>Why is my deploy not visible?</summary>

Confirm the deploy is enabled in the version you plan to publish. Check that its targeting conditions and locations match the page and visitor.

Publish a new Sagent version after saving. Deploy changes become live only in a published version.

</details>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.crobox.com/how-to-guides/sagent/deploy.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.