# Hubspot

*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.

<figure><img src="https://3440602746-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcCYilc27NCELgnKQNPVF%2Fuploads%2F6YFwT0qGNGyxYFlEgkeW%2Fimage%20(8).png?alt=media&#x26;token=4694e6a8-e860-4e5f-be55-af2c07b35d85" alt=""><figcaption></figcaption></figure>

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.&#x20;

Click on Add to your view button next to it

<figure><img src="https://3440602746-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcCYilc27NCELgnKQNPVF%2Fuploads%2FEmft8UmwjJ9HOR4sHpqc%2FPasted%20Graphic%201.png?alt=media&#x26;token=04c030cb-0d12-45db-92e6-4fd2661abc06" alt=""><figcaption></figcaption></figure>

#### 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

<figure><img src="https://3440602746-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcCYilc27NCELgnKQNPVF%2Fuploads%2Fg2flSJpmHT97OTv1tKx4%2FPasted%20Graphic.png?alt=media&#x26;token=fe55b66c-c5ee-4a2a-a332-6746105ac259" alt=""><figcaption></figcaption></figure>

#### Add code to your site:

Insert this code after body tag

```javascript
<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:*&#x20;

*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.*&#x20;

*For more information on this please read* [*https://developers.hubspot.com/docs/api/events/tracking-code*](https://developers.hubspot.com/docs/api/events/tracking-code)

### 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.

<figure><img src="https://3440602746-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcCYilc27NCELgnKQNPVF%2Fuploads%2FZmBneNZsmmP1LsjuHzde%2FScreenshot%202024-02-23%20at%204.36.39%E2%80%AFPM%201.png?alt=media&#x26;token=11f9e079-7915-45f2-93be-3d8cf114798c" alt=""><figcaption></figcaption></figure>

#### Make the field hidden.

<figure><img src="https://3440602746-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcCYilc27NCELgnKQNPVF%2Fuploads%2FSADXtgzHH33CgSMCaO1u%2FScreenshot%202024-02-23%20at%204.40.18%E2%80%AFPM.png?alt=media&#x26;token=e96bf24f-de82-4cec-ab9f-f48bad23c61a" alt=""><figcaption></figcaption></figure>

#### Add this code in your site after \</body> tag. If using webflow put this code in footer code section.

```javascript
<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>
```

**Note**:  **onFormReady** is an event which is emited after the form has been inserted into DOM. Please refer [this](https://legacydocs.hubspot.com/global-form-events) documentation to learn more form events in hubspot.

#### Find zipy session link in Hubspot

After successful form submission you will be able to see the zipy session link for a contact.

<figure><img src="https://3440602746-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcCYilc27NCELgnKQNPVF%2Fuploads%2F482VLRriTmgLkk7QqzmI%2FScreenshot%202024-02-23%20at%204.53.41%E2%80%AFPM.png?alt=media&#x26;token=3bdcffec-857e-4986-9ff3-0eb5c5de834b" alt=""><figcaption></figcaption></figure>