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

<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.