Integration reference

Ways to add CareerGPT to your site

Load the script once, then mark up a <div> wherever CareerGPT should appear. The data-career-gpt-trigger value picks the form: a full-width bar or a compact button. Or skip both and open it from your own element. All are live on this page.

ROI calculator

First, the script

One tag per page, before </body>. It mounts the widget and finds every trigger you placed. A page can carry more than one.

<script async src="https://SUBDOMAIN.sonicjobs.com/embed.js?clientId=CLIENT_ID"></script>

With no trigger on the page at all, the widget falls back to its own floating launcher in the bottom.

The bar

A full-width search bar with a typing prompt. Built for a hero or the top of a results page, where it is the main way in. It fills the div you give it, so you control the width.

<div data-career-gpt-trigger="bar"></div>

Scroll the bar out of view and the floating pill takes over, so there is always a way in. That is the default for a bar, so set data-career-gpt-fallback="none" to suppress it.

The button

A compact pill that opens the same assistant. Built for a header, a nav or beside a job posting: one deliberate entry point rather than the centre of the page.

<div data-career-gpt-trigger="button"></div>

A button does not hand over to the floating pill when it scrolls away. Set data-career-gpt-fallback="pill" if you want it to.

Send a prompt on click

Add data-career-gpt-prompt to a trigger to skip the blank chat: CareerGPT opens and asks (or searches) with that text right away, so a candidate never has to repeat context you already gave them.

Opens CareerGPT and immediately asks the configured question, useful anywhere the surrounding copy already raises the question, so the button just continues it:

<div data-career-gpt-trigger="button"
  data-career-gpt-prompt="What benefits do you offer?"></div>

Opens CareerGPT and immediately searches for nursing roles. A search prompt works the same way a question does:

<div data-career-gpt-trigger="button"
  data-career-gpt-prompt="Find nursing jobs near me"></div>

Leave the attribute off, or leave it blank, and the trigger opens general chat, exactly as before. Prompts are button-only: a bar carrying one opens general chat.

Your own call to action

Add data-career-gpt-cta to a button to replace its “Ask CareerGPT” label with your own words. Pair it with a prompt and the button says exactly what it will do:

<div data-career-gpt-trigger="button"
  data-career-gpt-cta="Find entry-level roles"
  data-career-gpt-prompt="Find entry-level jobs near me"></div>

The label never wraps or truncates, so keep it short. It also leads the button’s accessible name (“Find entry-level roles, opens InGen Biotech chat assistant”), so what a screen reader announces matches what is on screen. A bar ignores the attribute.

Use your own element

Prefer your own design? Add data-career-gpt-open to any element: a <button>, a link, a card, an image. Clicking it opens CareerGPT. We never render into, restyle or hide that element: its look, copy and accessibility stay yours.

<button type="button" data-career-gpt-open>Chat with us</button>

Add data-career-gpt-prompt to send a question the moment it is clicked, exactly as on a trigger:

<button type="button" data-career-gpt-open
  data-career-gpt-prompt="What benefits do you offer?">Ask about benefits</button>

From your own code

Open the chat from a form handler, a menu item or anywhere else, with or without a question:

window.SonicCareerGPT?.open?.();
window.SonicCareerGPT?.open?.("Find nursing jobs near me");

Keep the ?. guards. embed.js is cached by host pages for up to 24 hours, so open can be undefined on a visitor still running an older copy.

A marked link opens the chat instead of navigating once the widget is ready; before that, or on an older cached script, it follows its href.

A page with a marked element shows no floating launcher and no intro. The decision is made when embed.js mounts, so a single-page app that renders its first marked element later should call destroy() then mount(). A page that only calls open() keeps the floating launcher.

Options

data-career-gpt-trigger: bar or button. Anything else logs a warning and renders the bar, so a typo never leaves a hole in the layout.
data-career-gpt-fallback: pill or none, whether the floating launcher returns when this trigger is off screen. Defaults to pill for a bar and none for a button.
data-career-gpt-prompt: Button, or any data-career-gpt-open element. Any plain text, sent the moment the button is clicked. Omit it, or leave it blank, and the button opens general chat instead.
data-career-gpt-cta: Button only. Plain text that replaces the “Ask CareerGPT” label. Omit it, or leave it blank, and the default label stays.
data-career-gpt-open: Any element. Opens CareerGPT on click and is never restyled. Combine with data-career-gpt-prompt to send a question. Unlike the triggers, it is not limited to a <div>.

Put the attribute on a <div>. On a <button> or an <input> it cannot mount, and the page falls back to the floating launcher.

Reserve the space

Each form renders at a known size. Giving the div a matching minimum keeps the page from shifting when the widget mounts.

[data-career-gpt-trigger="bar"]    { min-height: 88px; }
[data-career-gpt-trigger="button"] { min-height: 74px; }

@media (max-width: 600px) {
  [data-career-gpt-trigger="bar"]    { min-height: 72px; }
  [data-career-gpt-trigger="button"] { min-height: 68px; }
}

The button’s width follows its label, about 210px for the default “Ask CareerGPT”, more or less with a custom CTA. In a horizontal row such as a header, reserve that too with min-width.