Note: The JS script is in early preview and code may change without notice or warning. Additionally if we are receiving too many page hits from your endpoint we may throttle your Space. Thank you!
To use the JS embed you should do the following:
- Create an API key for the space you wish your customer data to be sent to
- Add allowed domains if you're embedding on a production site (ie app.relationkit.io)
- Grab the API key and use it in the next step
- Embed the window.relationKitSettings in your page and the relkit.js file.
Here's some example code and some options you can pass to customize the experience.
The user_id nested inside the Customer object should represent your application's user id, or however your app identifies unique users.
<script>
window.relationKitSettings = {
options: {
// disable_ping: true, // disables the ping request to the server on every page load
},
customer: {
name: "<%= Current.user&.name %>",
email: "<%= Current.user&.email %>",
user_id: "<%= Current.user&.id %>"
}
}
</script>
<script async type="text/javascript"
src="https://YOURSPACEURLHERE/relkit.js" data-relationkit-api-key="YOURAPIKEY"></script>
Additionally, you can pass custom_attributes inside of the customer object that will be persisted to the Customer object, we'll display these custom attributes on your customer's profile in the RelationKit dashboard.
If you pass us a custom attribute ending in _url we'll automatically try and link that passed value in a button on the Customer profile. If you wish to customize the way a link is displayed, you can pass an Object (or Hash) with two keys, one of "title" with the title you want to be displayed on the button, and one of "url" which is the URL you'd like to link out to.
If you pass us a custom attribute ending in _at as a UNIX timestamp we'll automatically read it as a date time.
If you pass us a custom attribute ending in _list as an Array we'll automatically read it as such and display badges for each item in the list on the customer profile.
If you're familiar with Rails you can see in the example below we're passing the last seen at as Time.current.to_i which returns a unix timestamp of the current time.
<script>
window.relationKitSettings = {
customer: {
name: "<%= Current.user.name %>",
email: "<%= Current.user.email %>",
user_id: "<%= Current.user.id %>",
custom_attributes: {
"admin_url": "https://...",
"last_seen_at": "<%= Time.current.to_i %>", // send RelationKit a unix timestamp to convert to a datetime
"joined_at": "<%= Current.user&.created_at.to_i %>",
}
}
}
</script>
Pass an empty string for an attribute you wish us to remove
Manually pinging
If you choose to disable the automatic pings (our servers thank you!), you can still opt to ping by calling our class yourself from your JavaScript code. The following code assumes you've still set the window.relationKitSettings variable elsewhere, otherwise by just embedding the relkit.js script tag, you can manually pass a customer object containing the name and email to ping our endpoint.
RelationKit.ping({ customer: RelationKit.settings.customer })
// Or this would also work
RelationKit.ping({ customer: { name: "First Customer", email: "customer@example.com" })
As always, reach out if you need any help and we'll be happy to help!