Open the prebuilt chat widget from any button, link, or element on your page — without writing JavaScript.

When to Use This

You're using the Prebuilt Floating Widget (the default mode) and want to:

  • Add a "Need help?" link in your navbar
  • Put an "Open a ticket" button at the bottom of a docs page
  • Add a "Still stuck? Chat with us" CTA on a 404 page
  • Trigger the chat from a marketing landing page

If you're building a fully custom chat UI instead, see Custom Chat Widget (Data Attribute Mode).

Setup

Make sure the universal script is on the page:

<script src="https://www.cstar.help/cstar.js?team=YOUR_TEAM_SLUG"></script>

Then add data-cstar-chat to any element. cStar binds a click handler automatically.

The Three Behaviors

Attribute What Clicking Does
data-cstar-chat Opens the chat panel (no value, or any unrecognized value)
data-cstar-chat="new" Opens the panel and switches to the new-conversation form
data-cstar-chat="tickets" Opens the panel and shows the conversations list 
<button data-cstar-chat>Need help?</button>

<a href="#" data-cstar-chat="new">Open a ticket</a>

<button data-cstar-chat="tickets">View my conversations</button>

The handler calls event.preventDefault() and stopPropagation() for you, so links won't navigate and the click-outside-to-close logic won't immediately undo your click.

Common Patterns

Navbar "Help" link

<nav>
  <a href="#" data-cstar-chat>Help</a>
</nav>

"Still need help?" at the end of an article

<section class="article-footer">
  <p>Didn't find what you were looking for?</p>
  <button class="btn-primary" data-cstar-chat="new">Talk to us</button>
</section>

404 page

<button data-cstar-chat="new">Tell us what you were looking for</button>

Conditional CTA based on customer state

If you've already wired up identity verification, you can call CStarChat.identify() first and use data-cstar-chat="tickets" so logged-in customers land on their existing conversations.

JavaScript Alternative

When a static attribute isn't enough — say you need to pass a pre-filled subject — call the SDK directly:

document.querySelector('#contact-sales').addEventListener('click', () => {
  CStarChat.startConversation({
    subject: 'Sales question',
    message: 'Hi, I have a question about plans.'
  });
});

CStarChat.startConversation() opens the panel and creates the conversation with the subject and first message you pass. Skip data-cstar-chat="new" if you go this route — the SDK call handles both opening and the new-conversation flow.

Other useful methods for trigger buttons:

CStarChat.open();         // Just open the panel
CStarChat.close();        // Close it
CStarChat.toggle();       // Toggle
CStarChat.isOpen();       // Returns boolean
CStarChat.identify({ email, name, customer_id }); // Log customer in before opening

Styling

data-cstar-chat is just a hook for cStar's click handler. The element keeps whatever CSS class, size, color, or hover state you give it. Use your existing button styles.

Caveats

  • The handler skips elements inside <code>, <pre>, or .article-content — so docs examples like the snippets in this article don't accidentally bind to live triggers when shown in the help center.
  • data-cstar-chat works only in Prebuilt mode. If you have data-cstar-launcher or data-cstar-panel on the page, cStar switches to Custom Mode and the same attribute calls custom-mode SDK methods instead. The behavior is the same, but you're now responsible for the panel UI.
  • If the script hasn't finished loading when a customer clicks, the call is queued and runs on load. You won't lose clicks.

Testing

  1. Add a button with data-cstar-chat to a test page
  2. Reload, click the button
  3. The chat panel should open
  4. Add ="new" and click again — you should land on the new-conversation form

If nothing happens, open the browser console and check for [cStar Chat] errors. The most common cause is the script tag pointing to a missing team slug.