Install the widget onto your website by copying and pasting your snippet. Copy the code and paste it into the HTML of your web-app, ideally right before the closing </body>
tag.
Your snippet is in your admin page: Widget Snippet
init
Note: the init
method is called in the snippet that is generated in the app. If you have copy and pasted the snippet from the app, you do not need to call the init
method again.
_embark('init', {
embarkableKey: 'Get this from the app' // Your team ID can be found in the app
});
There are 2 ways to show the feedback form.
The simplest way to show the feedback from is to add the data-embarkable
attribute to an HTML element. A click handler will be added to any elements with the data-attribute
tag.
<button data-embarkable>This button will open the feedback form</button>
The feedback form can also been opened or closed using Javascript using showForm
or closeForm
methods.
showForm
_embark('showForm');
closeForm
_embark('closeForm');
While it is possible to operate the feedback form in anonymous mode, identifying your users will allow you to see who submitted the feedback. If the feedback form is being used in an app where you know the identity of a user (for example, because they are logged in), you can associate the feedback with the user without asking for their information.
identifyUser
Embarkable will attempt to match the user first by id
, and then by email
. If neither of these match a record in your Embarkable account, a new customer will be created with the information provided.
If a matching customer is found:
_embark('identifyUser', {
id: 'USER-ID-ABC-123', // The ID that you use to identify your user
email: 'jonh@test.com', // Replace with user Email
first_name: 'John',
last_name: 'Doe'
});
resetUser
Resetting a user will clear the user information from the widget's cache. This is useful to remove user information on logout.
_embark('resetUser');
customize
primaryColor
: string
(optional): Customize the colors in the feedback form by setting this value. Any css color will work.showEmailField
: boolean
(optional): Defaults to false. When true, the feedback form will show an input where the user is required to enter their email address. If this is used in conjunction with identifyUser
, the email address provided in the this input will take precedence._embark('customize', {
primaryColor: '#7507ea',
showEmailField: true
});
Registering callback functions allows you to execute any JavaScript code at specific moments in the lifecycle of the feedback form. A popular use-case for callback functions is to redirect a user or show some content after submitting feedback.
onShow
: () => voidCalled when the feedback form becomes visible to your user.
_embark('onShow', function() {
console.log('Feedback modal is open');
});
onClose
: () => voidCalled when the feedback form is closed, regardless of whether feedback was actually submitted.
_embark('onClose', function() {
console.log('Feedback modal was closed');
});
onSubmit
: () => void_embark('onSubmit', function() {
console.log('Feedback was submitted');
});
onSubmitSuccess
: () => void_embark('onSubmit', function() {
console.log('Feedback was submitted and the server accepted the feedback');
});
onSubmitError
: () => void_embark('onSubmit', function() {
console.log('Feedback was submitted, but there was an error');
});