nanorep.sdk.PhoneDialog

This class allows to create PhoneDialog instance by specifying channel

nanorep.sdk.ContactForm

This class allows to create ContactForm instance from specified configuration object.

nanorep.sdk.ChannelingBar

This component creates escalation bar with several buttons. Each button can initiate different kind of channels.

nanorep.api.feedback

Namespace object for channeling API.

Example usage

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'));
});

PhoneDialog Options

channel (required)

Type: Object

First argument in PhoneDialog constructor. Provide channel object to be displayed in the phone dialog

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>

PhoneDialog Methods

destroy

destroy() : void

Destroy the phone dialog instance

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>

ContactForm Options

config (required)

Type: Object

Provide form configuration object

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>

cancelable

Type: Boolean

Default: false

Show "cancel" button in the form

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>

ContactForm Methods

setValues

setValues() : void

Set predefined values into form

Parameters

values: Object Object with key/values, and keys are names of input fields
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>

destroy

destroy() : void

Destroy the contact form instance

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>

ContactForm Events

sent

formInstance.on('sent', function() {})

Occurred when form was sent

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>

cancel

formInstance.on('cancel', function() {})

Occurred when user pressed cancel to dismiss the form

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>

ChannelingBar Options

rechanneling

Type: Array

Default: []

Array of channels to show

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>

ContactForm Methods

setChannels

destroy(channels) : void

Specify the list of channels to be displayed

Parameters

channels: Array Same as rechanneling option
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>

ChannelingBar Events

channelActivated

formInstance.on('channelActivated', function() {})

Occurred when channel was activated by user

Arguments

channel: Object Object of activated channel
channelInstance: Instance Instance of activated channel
domNode: DOM Node Root node for channelInstance
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>

channelDeactivated

formInstance.on('channelDeactivated', function() {})

Occurred when channel was deactivated/dismissed by user

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>

api.channeling Methods

getAnswerChannels

getAnswerChannels(options) : answerChannels

Returns: Array with answer channels

This API method is used to get article channels list

Parameters

options: Object Plain object containing articleId
options.articleId: String Id of the article

getForm

getForm(options) : formConfig

Returns: Object with form config

This API method is used to get form configuration

Parameters

options: Object Plain object containing contactFormId
options.contactFormId: String Id of the form