1. Add script to your page:

<script src="https://<AccountName>.nanorep.co/web/include.js?sdk=channeling-bar,contact-form,phone-dialog&api=channeling"></script>

2. Create empty <div> with specific ID:

<div id="example-container"></div>

3. Load available channels for specific article using API and initialize ChannelingBar component which will display these channels:

// initialize SDK with common parameters
nanorep.sdk.init({
  host: 'product_demo.nanorep.co',
  account: 'product_demo',
  kb: 'docs'
});

// create сhannelingBar instance
nanorep.api.channeling.getAnswerChannels({
  articleId: '1048337092'
}).then(function(channels) {
  var сhannelingBar = new nanorep.sdk.ChannelingBar({
    id: '1048337092',
    rechanneling: channels
  }, document.getElementById('example-container'));
});

var fakePhoneChannel = {
  actionEsc: '0',
  buttonText: 'Call us please!',
  channel: '5',
  customContent: 'Oh hey, fancy seein\' you here!\nLooks like our phone lines are closed. Check back Monday-Friday, 7 am-5 pm PST, to talk to one of our rock star Student Advocates.',
  description: 'Normal phone',
  name: 'Phone',
  phoneNumber: Math.round(Math.random() * 10000000)
};
new nanorep.sdk.PhoneDialog(fakePhoneChannel, document.getElementById('phone-options-channel'));

<div id="phone-options-channel"></div>

var phoneDisposeInstance = new nanorep.sdk.PhoneDialog({
  actionEsc: '0',
  buttonText: 'Call us please!',
  channel: '5',
  customContent: 'Oh hey, fancy seein\' you here!\nLooks like our phone lines are closed. Check back Monday-Friday, 7 am-5 pm PST, to talk to one of our rock star Student Advocates.',
  description: 'Normal phone',
  name: 'Phone',
  phoneNumber: Math.round(Math.random() * 10000000)
}, document.getElementById('example-methods-phone_destroy'));

<div id="example-methods-phone_destroy"></div>
<button onclick="phoneDisposeInstance.destroy()">Destroy phone channel</button>

nanorep.api.channeling.getForm({ contactFormId: '-38290677' }).then(function(formConfig) {
  var contactForm = new nanorep.sdk.ContactForm({
    config: formConfig
  }, document.getElementById('form-option_config'));
});

<div id="form-option_config"></div>

nanorep.api.channeling.getForm({ contactFormId: '-38290677' }).then(function(formConfig) {
  var contactForm = new nanorep.sdk.ContactForm({
    config: formConfig,
    cancelable: true
  }, document.getElementById('form-option_config'));
});

<div id="form-option_config"></div>

var contactFormSetValues;
var promise = nanorep.api.channeling.getForm({ contactFormId: '-38290677' }).then(function(formConfig) {
  contactFormSetValues = new nanorep.sdk.ContactForm({
    config: formConfig
  }, document.getElementById('form-methods_setValues'));
});
function setValues() {
  promise.then(function() {
    contactFormSetValues.setValues({
      subject: 'Subjeect value',
      email: 'my-email@email.com',
      body: 'Some details'
    });
  });
}

<div id="form-methods_setValues"></div>
<button onclick="setValues()">Set custom values to form</button>

var contactFormDestroy;
nanorep.api.channeling.getForm({ contactFormId: '-38290677' }).then(function(formConfig) {
  contactFormDestroy = new nanorep.sdk.ContactForm({
    config: formConfig
  }, document.getElementById('form-methods_destroy'));
});

<div id="form-methods_destroy"></div>
<button onclick="contactFormDestroy.destroy()">Destroy Form</button>

nanorep.api.channeling.getForm({ contactFormId: '-38290677' }).then(function(formConfig) {
  new nanorep.sdk.ContactForm({
    config: formConfig
  }, document.getElementById('events-form_sent')).on('sent', function() {
    alert('Form is sent');
  });
});

<div id="events-form_sent"></div>

nanorep.api.channeling.getForm({ contactFormId: '-38290677' }).then(function(formConfig) {
  var form = new nanorep.sdk.ContactForm({
    config: formConfig,
    cancelable: true
  }, document.getElementById('events-form_cancel')).on('cancel', function() {
    alert('Form is canceled');
    form.destroy();
  });
});

<div id="events-form_cancel"></div>

new nanorep.sdk.ChannelingBar({
  rechanneling: [{
    actionEsc: '0',
    buttonText: 'Phone 1',
    channel: '5',
    customContent: 'Oh hey, fancy seein\' you here!\nLooks like our phone lines are closed.',
    description: 'Normal phone',
    name: 'Phone',
    phoneNumber: '123-456-78910'
  }, {
    ThankYouMessage: "thanks for posting this form!",
    actionEsc: "0",
    buttonText: "Form",
    channel: "1",
    contactForms: "-38290677",
    description: "ContactForm",
    name: "ContactForm",
    showInArticle: false
  }]
}, document.getElementById('bar-option_rechanneling'));

<div id="bar-option_rechanneling"></div>

var channelBarSetChannels = new nanorep.sdk.ChannelingBar({}, document.getElementById('bar-method_setChannels'));
function setCustomChannels() {
  channelBarSetChannels.setChannels([{
    actionEsc: '0',
    buttonText: 'Phone 1',
    channel: '5',
    customContent: 'Oh hey, fancy seein\' you here!\nLooks like our phone lines are closed.',
    description: 'Normal phone',
    name: 'Phone',
    phoneNumber: '123-456-78910'
  }, {
    ThankYouMessage: "thanks for posting this form!",
    actionEsc: "0",
    buttonText: "Form",
    channel: "1",
    contactForms: "-38290677",
    description: "ContactForm",
    name: "ContactForm",
    showInArticle: false
  }]);
}

<div id="bar-method_setChannels"></div>
<button onclick="setCustomChannels()">Set channels</button>

nanorep.api.channeling.getAnswerChannels({
  articleId: '1048337092'
}).then(function(channels) {
  new nanorep.sdk.ChannelingBar({
    id: '1048337092',
    rechanneling: channels
  }, document.getElementById('events-form_channelActivated')).on('channelActivated', function(channel, channelInstance, domNode) {
    alert('Activated channel name: ' + channel.name);
  });
});

<div id="events-form_channelActivated"></div>

nanorep.api.channeling.getAnswerChannels({
  articleId: '1048337092'
}).then(function(channels) {
  new nanorep.sdk.ChannelingBar({
    id: '1048337092',
    rechanneling: channels
  }, document.getElementById('events-form_channelDeactivated')).on('channelDeactivated', function() {
    alert('Dismissed');
  });
});

<div id="events-form_channelDeactivated"></div>