Placement Guide
Where the Sophi assistant appears in your storefront — eight entry points across search, discovery, product, cart and checkout, and how to choose between them.
Sophi is not just a chatbot. It is a guided commerce layer you place at the high-intent moments of the shopping journey — helping shoppers ask questions, discover products, compare options, complete baskets, and move toward purchase without leaving your storefront.
This guide covers eight placements. Each one meets the shopper at a different level of intent, and each is a small amount of code in your own storefront that calls the widget you already initialised.
widget.init(config)
mounts one iframe into the container you provide, and the assistant is laid
out as a full-height app — so give it a viewport-sized container and pass
height: '100%', or you get a 600px panel (the height default). Everything
below is your own trigger UI calling
show(),
sendTextMessage()
or sendProductReply().
The SDK ships no launcher button and no overlay, and show()/hide() toggle only
the iframe — the container, the trigger and their visibility are all yours.
The customer journey
Six surfaces span the full journey: Search (01 · 02) → Discovery (03 · 04) → Product (05 · 06) → Cart and Checkout (08), with the Menu entry point (07) available throughout.
- Search01 · 02
- Discovery03 · 04
- Product05 · 06
- Cart08
- Checkout08
- Menu07
Placements at a glance
The eight placements are grouped into four guides. Each shows how the surface looks on desktop and mobile, and the SDK call that wires it up.
Search & Recovery
01 · 02 — Ask AI inside the search bar, plus guided recovery of zero-result searches.
On-Page Triggers
03 · 04 — The floating trigger and the homepage banner widget for guided entry.
Product Pages
05 · 06 — Product-specific conversations on the PDP and Ask AI overlays on grid cards.
Navigation & Checkout
07 · 08 — Ask AI pinned to the nav menu, and the pre-purchase widget at cart and checkout.
Recommended placement strategy
| Placement | Where it appears | What it solves | Best use case |
|---|---|---|---|
| 01 Search Integration | Search bar | Keyword → conversational switch | High-intent queries, complex needs |
| 02 Post-Search Recovery | Search results page (zero results) | Search drop-off and abandonment | Recovering failed search sessions |
| 03 Floating Trigger | Homepage, PDP, PLP, campaign pages | Always-on guidance | Passive shoppers needing a nudge |
| 04 Homepage Widget | Homepage banner area | Pre-purchase questions and hesitation | Guided entry, delivery and return questions |
| 05 PDP Conversations | Product detail page | Product-specific questions, drop-off | Comparison, styling, product explanation |
| 06 Product Grid Panel | PLP, category pages | Product comparison and discovery | Consideration and browsing stage |
| 07 Menu Integration | Mobile and desktop nav menu | Low-friction AI entry point | Navigation-first shopping flows |
| 08 Checkout Widget | Cart, checkout | Pre-purchase hesitation | Reducing abandonment at checkout |
Combining placements
Placements are additive. Most stores launch with two or three and expand as engagement data comes in. Covering several high-intent moments supports shoppers from discovery to purchase: less friction, better product understanding, faster decisions.
Search Integration + Floating Trigger for coverage. Add the Product Grid Panel once browsing traffic is flowing, and the Checkout Widget to work on abandonment.
Every placement uses @usesophi/sophi-web-sdk. If you have not installed the
widget yet, start with the SDK Overview, then
come back here to choose entry points.
Whichever placements you pick, an integration is not complete without the three
production requirements: handle
add_to_cart, handle
send_to_checkout, and
call widget.updateUserCart(cart)
whenever your cart changes.