# Freshchat

## Overview

The following steps will help you integrate Zipy session url with Freshchat. This will help your support teams to understand user problems within tickets with Zipy session url so they can see what the users were doing when they reported a given issue in Freshchat. This will speed up time to resolution by your support team significantly without doing multiple back and forth with the customer. The same Zipy session url can be shared with development teams to report issues.  

### Step 1**:** Create a field for Zipy session url in Freshchat. 

To hold Zipy session url you will need to create a field for contacts in Freshchat.

<div align="center" data-full-width="false"><figure><img src="https://3440602746-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcCYilc27NCELgnKQNPVF%2Fuploads%2FIoZhGxIoJI95ztoOiWs9%2Fimage.png?alt=media&#x26;token=ba9ce6d9-a6cb-4db9-bf3b-e05f5ab3dc40" alt="" width="563"><figcaption></figcaption></figure></div>

Please refer this Freshchat documentation [link](https://developers.freshchat.com/web-sdk/v2/#user-properties) to create custom user field.

### Step &#x32;**:** Enable Zipy Session url in conversations.

Go to any conversation in Freshchat. Click on manage

<figure><img src="https://3440602746-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcCYilc27NCELgnKQNPVF%2Fuploads%2FVZ5KK0ZrtKrDofWdTsSV%2Fimage.png?alt=media&#x26;token=98a5345d-148b-4287-8272-9d4cba67a237" alt="" width="331"><figcaption></figcaption></figure>

Select Zipy session url and click on Save.

<figure><img src="https://3440602746-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcCYilc27NCELgnKQNPVF%2Fuploads%2FO41ivQvFCurrCkL5q99t%2Fselect_zipy_session_url.png?alt=media&#x26;token=c5406c7e-2d7a-4c7c-bd01-8371203e271b" alt="" width="347"><figcaption></figcaption></figure>

### Step 3: Adding Zipy Session URL to Freshchat User Profile.

To begin, follow the steps below:

1. Open your Freshchat-enabled application.
2. Add the following code snippet to your application:

```javascript
const zipySessionUrl = window.zipy.getCurrentSessionURL();

window.fcWidget.user.setProperties({
  cf_zipy_session_url : zipySessionUrl
});
```

**Note: Here the `cf_zipy_session_url` is the internal name given by Freshchat for the custom field. Replace it with your internal name accordingly.**

By executing this code, the Zipy session URL will be associated with the corresponding user profile in Freshchat.

### Step 4: Displaying Zipy Session URL in Freshchat Conversations&#x20;

Once the Zipy session URL is added to the user profile, it will appear in the 'Contact info' section during a conversation within Freshchat.

<figure><img src="https://3440602746-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcCYilc27NCELgnKQNPVF%2Fuploads%2FgJ0Nvx2s7gQWv6NZtpi0%2Fimage.png?alt=media&#x26;token=a3acadbe-f13d-4374-97e1-4be93aed7b55" alt="" width="320"><figcaption></figcaption></figure>

By following these steps, you will successfully integrate Zipy with Freshchat, providing you with valuable session information to enhance customer support and improve user experience.

### Example Use Case&#x20;

**Sending Zipy Session URL to Freshchat during a Chat Interaction.**&#x20;

1. Ensure that both Freshchat and Zipy are installed in your application.
2. Implement the following code in your frontend application where Freshchat is enabled.

```javascript
window.fcSettings = {
  onInit: function() {
    window.fcWidget.on("widget:opened", function(resp) {
     
      const zipySessionUrl = window.zipy.getCurrentSessionURL();

      window.fcWidget.user.setProperties({
        cf_zipy_session_url : zipySessionUrl
      });

    });
  }
}
```

In this scenario, when the user opens the Freshchat widget, the Zipy session URL will be retrieved and sent to Freshchat. This session url can be accessed within Freshchat as part of Contact info.&#x20;

For more information on `widget:opened` event, please refer to this [link](https://developers.freshchat.com/web-sdk/v2/#messenger-events).