Embedded access point to support content.
<div class="help-centre help-centre--panel" style="--accent:#BFD9F2">
<h3 class="help-centre__heading">Help Centre</h3>
<label class="help-centre__search">
<svg width="14" height="14" viewBox="0 0 16 16" fill="none" aria-hidden="true"><circle cx="7" cy="7" r="5.2" stroke="currentColor" stroke-width="1.4"/><path d="M11 11l3.2 3.2" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
<input type="text" placeholder="Search articles..." />
</label>
<p class="help-centre__meta">24 articles available</p>
<ul class="help-centre__list">
<li><a href="#">Getting started with your workspace</a></li>
<li><a href="#">Managing billing and seats</a></li>
<li><a href="#">Connecting integrations</a></li>
</ul>
</div>
<style>
.help-centre { font: 16px/1.5 system-ui, sans-serif; color: #241430; max-width: 300px; padding: 18px; background: #FAF7F2; }
.help-centre__heading { margin: 0 0 10px; font-size: 16px; font-weight: 600; }
.help-centre__search { display: flex; align-items: center; gap: 8px; border: 1.5px solid #24143030; border-radius: 8px; padding: 8px 10px; color: #24143099; }
.help-centre__search input { border: none; outline: none; font: 13.5px system-ui, sans-serif; flex: 1; background: transparent; color: #241430; }
.help-centre__meta { margin: 10px 0; font-size: 12px; color: var(--accent); font-weight: 600; }
.help-centre__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.help-centre__list a { color: #241430; text-decoration: none; font-size: 13.5px; padding: 6px 0; display: block; border-bottom: 1px solid #24143014; }
.help-centre__list a:hover, .help-centre__list a:focus-visible { color: var(--accent); outline: none; }
.help-centre--panel { border: 1.5px solid #24143022; border-radius: 12px; }
.help-centre--popover { border-radius: 12px; box-shadow: 0 14px 30px rgba(36,20,48,.2); }
.help-centre--sidebar { border-left: 3px solid var(--accent); border-radius: 0; max-width: 260px; }
</style><div class="help-centre-tw help-centre-tw--panel max-w-[300px] p-4.5 bg-[#FAF7F2] font-sans text-[#241430]" style="--accent:#BFD9F2">
<h3 class="m-0 mb-2.5 text-base font-semibold">Help Centre</h3>
<label class="flex items-center gap-2 border-[1.5px] border-[#24143030] rounded-lg px-2.5 py-2 text-[#24143099]">
<svg width="14" height="14" viewBox="0 0 16 16" fill="none" aria-hidden="true"><circle cx="7" cy="7" r="5.2" stroke="currentColor" stroke-width="1.4"/><path d="M11 11l3.2 3.2" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
<input type="text" class="border-0 outline-none text-[13.5px] flex-1 bg-transparent text-[#241430]" placeholder="Search articles..." />
</label>
<p class="my-2.5 text-xs font-semibold" style="color:#BFD9F2">24 articles available</p>
<ul class="list-none m-0 p-0 flex flex-col gap-1.5">
<li><a href="#" class="block text-[13.5px] text-[#241430] no-underline py-1.5 border-b border-[#24143014] hover:opacity-70">Getting started with your workspace</a></li>
<li><a href="#" class="block text-[13.5px] text-[#241430] no-underline py-1.5 border-b border-[#24143014] hover:opacity-70">Managing billing and seats</a></li>
<li><a href="#" class="block text-[13.5px] text-[#241430] no-underline py-1.5 border-b border-[#24143014] hover:opacity-70">Connecting integrations</a></li>
</ul>
</div>
<style>
.help-centre-tw--panel { border: 1.5px solid #24143022; border-radius: 12px; }
.help-centre-tw--popover { border-radius: 12px; box-shadow: 0 14px 30px rgba(36,20,48,.2); }
.help-centre-tw--sidebar { border-left: 3px solid #241430; max-width: 260px; }
</style>export function HelpCentreWidget({
heading = "Help Centre",
searchPlaceholder = "Search articles...",
articleCount = 24,
variant = "panel",
accent = "#BFD9F2",
}) {
const wrap = {
panel: { border: "1.5px solid #24143022", borderRadius: 12 },
popover: { borderRadius: 12, boxShadow: "0 14px 30px rgba(36,20,48,.2)" },
sidebar: { borderLeft: "3px solid " + accent, maxWidth: 260 },
}[variant] ?? {};
return (
<div style={{ fontFamily: "system-ui, sans-serif", color: "#241430", maxWidth: 300, padding: 18, background: "#FAF7F2", ...wrap }}>
<h3 style={{ margin: "0 0 10px", fontSize: 16, fontWeight: 600 }}>{heading}</h3>
<label style={{ display: "flex", alignItems: "center", gap: 8, border: "1.5px solid #24143030", borderRadius: 8, padding: "8px 10px", color: "#24143099" }}>
<svg width="14" height="14" viewBox="0 0 16 16" fill="none" aria-hidden="true"><circle cx="7" cy="7" r="5.2" stroke="currentColor" strokeWidth="1.4" /><path d="M11 11l3.2 3.2" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" /></svg>
<input type="text" placeholder={searchPlaceholder} style={{ border: "none", outline: "none", fontSize: 13.5, flex: 1, background: "transparent", color: "#241430" }} />
</label>
<p style={{ margin: "10px 0", fontSize: 12, color: accent, fontWeight: 600 }}>{articleCount} articles available</p>
<ul style={{ listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: 6 }}>
{["Getting started with your workspace", "Managing billing and seats", "Connecting integrations"].map((item) => (
<li key={item}><a href="#" style={{ color: "#241430", textDecoration: "none", fontSize: 13.5, padding: "6px 0", display: "block", borderBottom: "1px solid #24143014" }}>{item}</a></li>
))}
</ul>
</div>
);
}