Search documentation

Search for docs or ask AI

Vanilla JavaScript Quickstart

Use the Pillar SDK in any JavaScript application without React.

What you'll build:

  • A slide-out assistant panel with co-pilot chat
  • An assistant button or sidebar trigger that opens the panel
  • Basic action handling

Note: For the best experience with advanced features like Plans and Custom Cards, we recommend the React integration. This guide covers core functionality for vanilla JavaScript applications.

Prerequisites

Option 1: Script Tag (Fastest)

Add the SDK via a script tag - no build step required:

examples/quickstarts/vanilla/script-tag-init.html
<script src="https://cdn.trypillar.com/sdk.js"></script>
<script>
  Pillar.init({
    productKey: 'your-product-key',
    publicKey: 'pk_live_xxx',
  });
</script>

Auto-Initialization

Use data attributes for automatic initialization:

examples/quickstarts/vanilla/auto-init.html
<script
  src="https://cdn.trypillar.com/sdk.js"
  data-product-key="your-product-key"
  data-public-key="pk_live_xxx"
></script>

Option 2: NPM Installation

Install via npm if you're using a bundler:

bash
npm install @pillar-ai/sdk

Then import and initialize:

examples/quickstarts/vanilla/npm-init.js
import { Pillar } from '@pillar-ai/sdk';


await Pillar.init({
  productKey: 'your-product-key',
  publicKey: 'pk_live_xxx',
});

Add an Assistant Button (Optional)

By default, Pillar shows a sidebar tab on the screen edge. If you disable it or want a custom trigger, create a button to open the panel:

examples/quickstarts/vanilla/assistant-button.html
<button id="assistant-button">Ask Assistant</button>


<script>
  document.getElementById('assistant-button').onclick = function() {
    Pillar.toggle();
  };
</script>

Configuration

Pass configuration options to init:

examples/quickstarts/vanilla/configuration.js
Pillar.init({
  productKey: 'your-product-key',
  publicKey: 'pk_live_xxx',
  
  panel: {
    position: 'right',
    mode: 'push',
    width: 400,
  },
  
  theme: {
    mode: 'auto',
    colors: {
      primary: '#2563eb',
    },
  },
});

Control the Panel

examples/quickstarts/vanilla/panel-control.js
// Open the panel
Pillar.open();


// Open to a specific article
Pillar.open({ article: 'getting-started' });


// Open with a search query
Pillar.open({ search: 'billing' });


// Close the panel
Pillar.close();


// Toggle
Pillar.toggle();

Set Context

Tell Pillar what the user is doing for smarter AI responses:

examples/quickstarts/vanilla/set-context.js
Pillar.setContext({
  currentPage: window.location.pathname,
  userId: 'user_123',
  userRole: 'admin',
});

Handle Actions

Register handlers for actions the AI suggests:

examples/quickstarts/vanilla/handle-actions.js
Pillar.onTask('navigate', function(data) {
  window.location.href = data.path;
  return { success: true };
});


Pillar.onTask('open_modal', function(data) {
  document.getElementById(data.modalId).showModal();
  return { success: true };
});

Register Custom Cards

Create custom confirmation UI for actions:

examples/quickstarts/vanilla/register-cards.js
Pillar.registerCard('invite_members', function(container, data, callbacks) {
  container.innerHTML = `
    <div class="invite-card">
      <h3>Invite Members</h3>
      <div class="emails">${data.emails.join(', ')}</div>
      <button id="cancel">Cancel</button>
      <button id="confirm">Send Invites</button>
    </div>
  `;


  container.querySelector('#confirm').onclick = function() {
    callbacks.onConfirm(data);
  };


  container.querySelector('#cancel').onclick = callbacks.onCancel;


  // Return cleanup function
  return function() {
    container.innerHTML = '';
  };
});

Update Theme

examples/quickstarts/vanilla/update-theme.js
// Change mode
Pillar.setTheme({ mode: 'dark' });


// Update colors
Pillar.setTheme({ 
  colors: { primary: '#10b981' } 
});

Event Listeners

examples/quickstarts/vanilla/event-listeners.js
// Panel events
Pillar.on('panel:open', function() {
  console.log('Panel opened');
});


Pillar.on('panel:close', function() {
  console.log('Panel closed');
});


// Ready event
Pillar.on('ready', function() {
  console.log('SDK initialized');
});

Cleanup

Destroy the SDK when done:

examples/quickstarts/vanilla/cleanup.js
Pillar.destroy();

Next Steps