Help Topics
AllWidget
Widget Setup

Installation

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

Showing the feedback form

There are 2 ways to show the feedback form.

Attach the feedback form to a button

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>

Show and hide the feedback form programmatically

The feedback form can also been opened or closed using Javascript using showForm or closeForm methods.

showForm

_embark('showForm');

closeForm

_embark('closeForm');

Identify Users

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:

  • and if the Embarkable customer record does not have information for any of the below fields, we will update our record with what is provided.
  • if the Embarkable customer record already has information in a field, it will not be overwritten. For example, if a customer is identified via your user ID, but the emails do not match, Embarkable will not update our record with the provided email address.
_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 your feedback form

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

Register callback functions

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: () => void

Called when the feedback form becomes visible to your user.

_embark('onShow', function() {
	console.log('Feedback modal is open');
});

onClose: () => void

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

Unleash user insights.

Build better products.

NO CREDIT CARD REQUIRED