The Pipeback Messenger SDK provides a JavaScript API that allows you to programmatically control the messenger widget on your website. This gives you complete flexibility to integrate Pipeback into your application's user experience.

Getting Started

Once you've installed the Pipeback widget on your website, the SDK is automatically available through the global $pipeback object. You can call any of the methods below directly from your JavaScript code.

Boot

Controls automatic initialization. Set to false to prevent auto-start and manually call start() when ready. Default: true

window.$pipeback = {
  boot: false // default true
}

Language

You can configure the widget language by setting the locale property in the window.$pipeback configuration object.

window.$pipeback = {
    locale: "pt-BR" // default auto
}

start()

Initializes or reinitializes Pipeback on the page.

$pipeback.start();

destroy()

Completely removes Pipeback from the page and resets all state.

$pipeback.destroy();

Visibility Methods

Control whether the messenger launcher button is visible on the page.

show()

Makes the messenger launcher button visible.

$pipeback.show();

Use case: Display the messenger after a user completes onboarding or reaches a specific page.

hide()

Hides the messenger launcher button from view.

$pipeback.hide();

Use case: Hide the messenger on your pricing or checkout pages to reduce distractions.

Window Methods

Control whether the messenger window is open or closed.

open()

Opens the messenger window.

$pipeback.open();

Use case: Automatically open the messenger when a user clicks a "Contact Support" button in your app.

close()

Closes the messenger window.

$pipeback.close();

Use case: Close the messenger programmatically after a specific action is completed.

Navigation Methods

Navigate users to specific sections within the messenger.

navigate(section)

Navigate to a specific section of the messenger. Available sections:

// Navigate to home
$pipeback.navigate('home');

// Navigate to messages
$pipeback.navigate('messages');

// Navigate to help center
$pipeback.navigate('help');

// Navigate to product updates
$pipeback.navigate('news');

navigate('helpArticle', [uuid])

// open help desk article
$pipeback.navigate('helpArticle', 'article-uuid');

navigate('newsPost', [uuid])

// open news center post
$pipeback.navigate('newsPost', 'post-uuid');

navigate('newMessage', [prefill])

Start a new conversation, optionally with pre-filled text.

// Open new message
$pipeback.navigate('newMessage');

// Open new message with pre-filled text
$pipeback.navigate('newMessage', 'I need help with billing');

Use case: Create contextual support buttons throughout your app that open the messenger with relevant pre-filled messages.

Common Use Cases

Contextual Help Buttons

Add help buttons anywhere in your application that open the messenger with context:

document.getElementById('billing-help').addEventListener('click', function() {
  $pipeback.navigate('newMessage', 'I have a question about my billing');
});

Smart Visibility

Hide the messenger on specific pages and show it on others:

// Hide on pricing page
if (window.location.pathname === '/pricing') {
  $pipeback.hide();
}

// Show on dashboard
if (window.location.pathname === '/dashboard') {
  $pipeback.show();
}

Proactive Engagement

Open the messenger automatically when users might need help:

// Open messenger after 30 seconds on a complex page
setTimeout(function() {
  $pipeback.open();
  $pipeback.navigate('help');
}, 30000);

Event Callbacks

Listen to messenger events to trigger custom actions in your application.

Available Callbacks

Configure callbacks to respond to messenger events:

window.$pipeback = {
  callbacks: {
    onLoaded: () => {
      console.log("Pipeback loaded");
    },
    onShow: () => {
      console.log("Pipeback show");
    },
    onHide: () => {
      console.log("Pipeback hide");
    },
    onOpen: () => {
      console.log("Pipeback open");
    },
    onClose: () => {
      console.log("Pipeback closed");
    }
  }
};

onLoaded() - Triggered when the messenger finishes loading

onShow() - Triggered when the launcher button becomes visible

onHide() - Triggered when the launcher button is hidden

onOpen() - Triggered when the messenger window opens

onClose() - Triggered when the messenger window closes

Use case: Track user interactions, pause/resume media playback, or trigger custom actions based on messenger state changes.

Need Help?

If you have questions about implementing the Messenger SDK, reach out to our support team or check our other documentation articles.