Build a custom widget

At the end of this tutorial, the Nimbus CRM agent opens in a side panel that has the app's font, corners and colors, so it reads as one more panel of the app.

A custom widget is the sixth presentation. You build it in a wizard of six steps, with the real widget drawn next to the steps and redrawn with every choice.

In this tutorial, you:

• Open the wizard
• Choose the look to start from
• Choose the placement, the surface and the answers
• Choose the header and the shapes
• Save, publish and deploy

Before you begin

• A Web Agent for Nimbus CRM with a version published and deployed. The wizard draws the real widget, and it needs a published version to do it. See Build your first Web Agent.

Open the wizard

1. In the portal, go to Web Agents and select the Nimbus CRM agent.
2. Select the Look & feel tab.
3. Under Presentation, select the Custom card.

The wizard opens inside the tab. The steps are in one column, and the widget is beside them over a sample conversation. Each step closes when you select Continue, and Edit on a closed step opens it again.

1. Start from

This step chooses the look the widget builds on: its font, corners, borders and shadows. It is the same look the components in a reply use.

For Nimbus CRM:

1. Select Read my app’s code.
2. Select the Read my app’s code button in the card that appears. The read runs on your model provider, costs tokens and takes a minute or two.
3. When the card shows the date of the read and a confidence badge, the read is done. If the card offers Use my app’s brand colours, leave it selected. The widget takes the background, text and primary colors found in Nimbus CRM.
4. Select Continue.

The widget beside the steps now has the app's font and colors. If the agent already has a look read from the code, the card shows it and you can continue without reading again.

2. Placement

1. Under Placement, select Side panel. The widget takes the full height of the page, flush with the edge. Floating window keeps a margin all around.
2. Under Side, leave Right. Nimbus CRM has its navigation on the left.
3. Select Continue.

With Left, the widget opens away from the launcher's default corner. Move the launcher under Launcher in the Look & feel tab. See Choose a launcher and its position.

3. Surface

1. Select Solid. The panel is opaque, in the background color from step 1.
2. Select Continue.

Glass is frosted and the page shows through. Clear puts the messages over the page on a light veil.

4. Answers

1. Select Plain. The agent's answers are text directly on the surface.
2. Select Continue.

Bubble draws each answer in its own box.

5. Header and shapes

This step asks four things.

1. Under Header, select Minimal. The panel shows its controls only. Title bar adds the conversation title and the agent's name.
2. Under The widget’s shapes, leave Your app’s look. The window, the bubbles, the composer and the conversations list take the corners, border and shadow read in step 1.
3. Under The components’ shapes, select Your app’s look. The cards, tables and buttons in the agent's replies take the same look. This is the same setting as the look switch in the Generative UI tab.
4. Under Full screen, select Not offered. A side panel that fills the page would cover the app.
5. Select Continue.

6. Review

The last step lists the Look, the Widget and the Components you chose.

1. Compare the widget beside the steps with Nimbus CRM. To change a choice, select Edit on its step.
2. Select Save custom widget.

The Look & feel tab opens again with the Custom card selected. The card reads "Side panel · right · solid · plain answers · minimal header · your app’s shapes · no full screen".

Saving writes the widget, the look and the brand colors to the draft. To send them to your users:

1. Publish a version.
2. Deploy the version to the environment Nimbus CRM loads.

What you built

The Nimbus CRM agent has a custom widget: a solid side panel on the right with the app's look and a minimal header. It is the Custom card under Presentation, and Edit on the card opens the wizard on its review step.

Selecting another presentation keeps the custom widget for later.

Next steps

• Presentations: every option of the custom widget and its default.
• Choose a launcher and its position: put the launcher where the panel opens.
• Import your own components: show Nimbus CRM's own cards inside the panel.