Note : Make sure you have Zipy and Hubspot installed on your site.
Hubspot chat widget Integration
Create a field in Hubspot to store the Zipy session link copy its name
Go to your Hubspot settings > Properties (Under data management). Select object type Contact. Select group to contact information. Then create the property.
Enter label name as Zipy session link. Copy its internal name(this will be used in further steps).
Configure the contact view
Go to your Hubspot settings > Contacts > Open any contact > Go to About this contact section and click on View all properties button at the bottom of this section.
Find Zipy session link property that we created in earlier steps.
Click on Add to your view button next to it
Allow tracked events to update contact properties
Go to your hubspot settings > tracking code > Advanced Tracking. Then turn on the Allow tracked events to update contact properties to allow code snippet to update the user’s Zipy session link
Add code to your site:
Insert this code after body tag
<script type="text/javascript">
function sendZipySessionLinkToHubspot() {
const email = `<end_user_email>`; //put your end user's email here, hubspot identifies user by their unique email id
/* if user has passed the email in chat then user will be identified */
const zipy_session /*property internal name*/ = window.zipy.getCurrentSessionURL();
const identifyData = email ? { email, zipy_session } : { zipy_session }
_hsq.push(["identify",identifyData]);
_hsq.push(['trackPageView']);
}
function onConversationsAPIReady() {
const hubspotWidgetActions = ['widgetLoaded','conversationStarted','unreadConversationCountChanged']; //Hubspot widget events
hubspotWidgetActions.forEach((action) => {
window.HubSpotConversations.on(action, () => {
sendZipySessionLinkToHubspot();
});
})
}
if (window.HubSpotConversations) {
onConversationsAPIReady();
} else {
window.hsConversationsOnReady = [onConversationsAPIReady];
}
</script>
Note:
To store Zipy session link for a user we need to first identify it then update its Zipy session link property.
A record for user will be created in hubspot only after the email is supplied by user in chat or set up by us in code. Until then the user will be seen as a visitor by hubspot.
Hubspot Forms Integration
Follow the above mentioned steps till Allow tracked events to update contact properties for integration with hubspot forms.
Add a field in your hubspot form to get a zipy session url in form data and make it hidden.
Make the field hidden.
Add this code in your site after </body> tag. If using webflow put this code in footer code section.
<script>
const getCurrentZipySessionURL = async () => {
return await new Promise(function(resolve, reject) {
let i = 0;
const _interval = setInterval(() => {
let zipySessionUrl = (window)?.zipy?.getCurrentSessionURL();
if(zipySessionUrl){
resolve(zipySessionUrl);
clearInterval(_interval);
}
else{
i++;
if(i >= 4){
reject("Some problem occured while loading zipy.");
clearInterval(_interval);
}
}
},1500);
});
}
window.addEventListener('message', async (event) => {
if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormReady') {
const hubSpotFormClassName = 'hbspt-form';
const zipyFieldInternalName = 'zipy_session'; /* Internal field name of zipy session link field */
const hubSpotForm = document.getElementsByClassName(hubSpotFormClassName)?.[0]?.firstChild;
const zipySessionUrl = await getCurrentZipySessionURL();
if(hubSpotForm){
const formInputs = hubSpotForm.contentDocument.body.getElementsByTagName("input");
for (let i = 0; i < formInputs.length; i++) {
if(formInputs[i].name === zipyFieldInternalName){
/* Assign value to hidden zipy input field*/
formInputs[i].value = zipySessionUrl;
break;
}
}
}
}
});
</script>
Find zipy session link in Hubspot
After successful form submission you will be able to see the zipy session link for a contact.
For more information on this please read
Note: onFormReady is an event which is emited after the form has been inserted into DOM. Please refer documentation to learn more form events in hubspot.
