Let customers open and follow their requests inside your app.
How it works
Customers see their requests and your replies, and can open new ones, without leaving your app. A request opened in the portal is a ticket like any other: it arrives in the inbox, and your replies also go out by email on portalChannelId, so the customer can answer from their mail client too. Internal notes and automatic mail are never shown.
API
Your API
const s = support();
const access = { customerId: user.accountId, userId: user.isAccountAdmin ? null : user.id };
// List and read: only this customer's requests (and only their own, with userId).
await s.portal.list({ ...access, readerId: user.id });
await s.portal.get({ ticketId, ...access, readerId: user.id });
// Open a request: becomes a ticket on portalChannelId; replies also go out by email.
await s.portal.create({
customerId: user.accountId,
userId: user.id,
email: user.email,
name: user.name,
locale: user.locale,
subject,
text,
});
// Reply from the portal.
await s.portal.reply({ ticketId, customerId: user.accountId, userId: user.id, onlyOwn: !user.isAccountAdmin, email: user.email, name: user.name, text });Screens
app/support
"use client";
<SupportPortalProvider client={portalClient} listHref="/support" requestHref={(id) => `/support/${id}`}>
<SupportRequests newRequestOpen={open} onNewRequestOpenChange={setOpen} />
</SupportPortalProvider>
// app/support/[id]/page.tsx
<SupportPortalProvider client={portalClient} listHref="/support" requestHref={(id) => `/support/${id}`}>
<SupportRequest id={id} />
</SupportPortalProvider>| Name | Type | Description |
|---|---|---|
client* | SupportPortalClient | list, get, create, reply and attachmentUrl, backed by your API. |
listHref* | string | The requests list. |
requestHref* | (id) => string | One request. |
t / locale | | As for the agent screens. |
Who sees what
You decide. Pass
customerId to scope everything to one customer account, and userId to narrow it further to the requests a person opened. Attachment links go through the same check.