Getting Started

ProductBird is super easy to get up and running with.


Installation

The first thing you need to do is install the widget on your website.

In your <head> tag (anywhere is fine) add the following:

<script>
!function(e,t){if(e.productBird)console.error("productBird embed already included");else{e.productBird={},m=["init","initUser","identify","updateProperty","updateProperties"],e.productBird._c=[],m.forEach(t=>e.productBird[t]=function(){e.productBird._c.push([t,arguments])});var d=t.createElement("script");d.type="text/javascript",d.async=!0,d.src="https://widget.productbird.io/embed.js";var i=t.getElementsByTagName("script")[0];i.parentNode.insertBefore(d,i)}}(window,document);
</script>

This will automatically download and inject the ProductBird script. This will also create a productBird object on the window, exposing the API.

The last step is to place a call to productBird.init anywhere in your code, providing your project-id e.g.

window.productBird.init(<project_id>)

Identifying users

Once you have installed the widget, you can now start identifying your users so they start showing up in the dashboard.

To do so is easy, just call the window.productBird.identify function:

window.productBird.identify({
userId: "your-unique-user-identifier",
email: "test@example.com",
firstName: "Bobby",
lastName: "Tables",
imageUrl: "https://example.com/image.png",
joined: "2018-01-01",
properties: {
companyName: "Tables Inc.",
role: "Founder",
plan: "premium",
mrr: "49",
numberOfPost: "812"
},
})

Fields

Below is an explanation of each field

pathtyperequireddescription
userIdstringtrueA unique ID from your system that you can use to identify the user.
emailstringfalseThe users email address
firstNamestringfalseUsers first name.
lastNamestringfalseUsers last name
namestringfalseUsers full name, for when you don't have a first name / last name
imageUrlurlfalseThe users avatar. Must be a url (starting with https://)
joinedISO8601 DatetrueThe date the user joined the system, in ISO8601 format such as 2018-12-25
propertiesobjectfalseA object containing key value pairs of properties that make sense to track in your product. These can also be used to segment the users. The values are all currentlytreated as strings. Some key / value pairs have a special meaning if supplied, see below details for what they are.

Special Properties

There's also certain properties which if provided can give Kampsite more functionality. They are listed below:

property
companyNameIf your product has multiple users for a particular org/company use this to track the users of the same org
mrrMonth Recurring Revenue. The amount the user pays each month.
planThe plan the user is currently on, if you have one.
roleThe users role in the company, e.g. 'Founder'. This is important, especially if you want to segment based on this value

JS SDK

inits

Inits the ProductBird widget. You can also override settings and text from this function:

window.productBird.init(<api_key>, initOps)

Where init opts is an object with the following structure:

export interface Config {
position: "right"
productName: string
showButton: boolean
enabled: boolean
text: {
newSuggestionSubText: string
newSuggestionGoal: string
newSuggestionGoalSubText: string
newSuggestionSuccess: string
commentSuccess: string
doesWellSubTitle: string
improvementsSubTitle: string
targetSubTitle: string
permissionQuestion: string
pmfSuccess: string
}
colors: {
primary: string
secondary: string
}
}

identify

Identifies the currently signed in user. See above for more examples.

window.productBird.identify({})

updateProperty

Updates a specific user key / value pair. Creates it if it doesn't exist:

window.productBird.updateProperty('mrr', '299')

updateProperties

Updates multiple key / value pairs at the same time. Creates them if they don't exist.

window.productBird.updateProperties({
mrr: '299',
plan: 'premium'
})