Integrating your websites with your website has a number of benefits to your marketing processes including automation, seamless management, better communication, and better customer service. 

Note: We’ve introduced CRM Tracking code to track all website events, marketing, and sales interactions in one place. Install the unified tracking code to automatically add chat widget, connect existing forms, track custom events, run CRO experiments, and add/update contact information.

1. Webforms

Web forms by Freshworks CRM enables you to convert website visitors into contacts. With web forms, you can enable website visitors to submit their contact information and immediately capture them as contacts on your CRM. 

There are two major steps to set up Web forms successfully

• Creating and customizing the form and obtaining the link

• Integrating the form link on your website

• Setting up Web forms

• To set up Web forms, go to Admin Settings > Website Tracking and Marketplace Apps (under Marketplace and Integrations) > Web Forms and choose between Classic Forms and Smart Forms.

• Click on the Create and view form button under Classic form. This opens the page dedicated to Classic Forms. You can view all forms created previously and also create new forms. 

• Click the Create Web form button. This takes you to the Add form page where you configure your Web form.

• Create and customize your web form on this page. Read the table below to understand the different form fields.

S.No	Form fields	What they mean?
1.	Form name	This field requires you to give a name to your form. To ease identification, maintain a naming convention that helps you identify the form as this is only for internal purposes and will not be visible on the form. Example: Sign up form, Request a demo or Submit your queries, etc.
2.	Email address to notify when the form is submitted and record is created	Feed the email address to which all notifications will be sent. Whenever a form is submitted, a Contact will be created on Freshworks CRM and the notification will be sent to this email.
3.	After form is submitted	After the form is submitted, you can either: - display a success message - direct them to another webpage Based on your preference, add the exact message or the web page’s link here.
4.	Update existing record overwriting values	Checking this option prevents duplication of records. As soon as the form is submitted, the platform looks for existing records and matches them by email address. If a contact already exists in Freshworks CRM, the records gets updated and prevents creation of a new one.
5.	Title	Enter what the heading of your form should read in this field. This will appear on the top of the form.
6.	Choose a field to add to the form	This option allows you to add new fields to your form. Click on the '+' button. This brings opens a drop down list from which you can choose a variety of contact fields to add to your form.
7.	Contact Fields	Your form comprises of Contact fields that allows you to ask relevant questions to your customers and get back responses for the same. For any Contact field, there are two options that are available.  Required: Checking this box makes it a mandatory field for your Contact to fill. Until all required fields are filled the form cannot be submitted.    Hidden: Hidden fields are invisible to the customer and can be prefilled with default values when new contacts are created upon submission of the form. For example, you can add a Campaign field to the form but mark it hidden to your prospect. This makes it easy for internal reference and segregation.
8.	Header text	Enter a brief message that you want to convey to your web visitors before they fill the form.
9.	Customize the look and feel your form	Note: When you choose “Inherit” on any of your options, the form automatically inherits the properties that are present on your web page.
10.	Preview	Clicking on the Preview button allows you to check how your form might appear and use the same to refine its appearance to your specifications.
11.	Link	Clicking on the Link button saves your form and creates the code snippet and a custom URL for your form. If you wish to embed the form on your website, you can use the code snippet and add it to the body of your website’s HTML. If you want to share it via emails or social media, use the URL instead. The URL works universally and can be shared across medium.

• Click the Save button after configuring the webform. This makes the changes live and takes you back to the Web form list view.
• Alternatively, clicking on the Link button after making changes autosaves your form.
• Your form is now ready and can be integrated on your website. Here's how the code will appear like:

• Web forms Integration on WordPress.com

• Note: To integrate Web forms on WordPress.com, you require a Business Plan. Please ensure that your current WordPress.com plan is upgraded to the Business plan for you to embed Web forms on your site.
• On your WordPress.com site, head to the My Site button and click the same. This opens a sidebar that allows you to customize your WordPress.com site.

• On the sidebar, scroll down to the Personalize section and click on the  Customize button. This opens the Theme customizer.

• On the Theme customizer bar, scroll down to Widgets and click the same. This opens the Widget customizer bar.

• Note: The default Sidebar is an entity inherent to this specific theme. The availability of customizable widget areas differs from theme to theme.
• Click the Widget area that you wish to customize. This opens a bar that allows you to add a Widget of your choice.  

• Click the  dropdown and select the Custom HTML option.

• Paste the code snippet in the content section of the Widget and click on Done. This will run the code and web forms will be embedded on your WordPress.com website.

• Proceed to hit the Publish button on top of your WordPress.com page to save the changes. This is how your Web form will look like

• Accessing Contacts generated through Web forms

• Whenever a website visitor fills your form, they will have to fill all the fields provided in order to make a submission. 
• Clicking on the Submit button creates a Contact on your Freshworks CRM depending on how you have configured your form to be.
• When you have contacts that are from several sources, you can filter the Contacts from your web forms by simply going to filters and applying the filter for Source.

2. CRM Code Library

CRM code library is a collection of libraries in different languages that you can use to integrate your website and web app with your Freshworks CRM account. The libraries, once installed, capture website visitors as contacts, track their activities, pages viewed, and update their information in real-time in Freshworks CRM. 

• The following are the libraries available in Freshworks CRM, 
• Javascript
• Ruby
• Java
• PHP
• Python

3. Tracking code for marketing

To run a test on your website, you need to add the JS snippet to all the page(s) of your website. Adding the snippet to your website is a one-time process and your experiments can be run multiple times provided the code is integrated into that webpage.

• To add the snippet, go to Admin Settings > Website Tracking and Marketplace Apps (Under Marketplace and Integrations) > Tracking Code for Marketing. 
• Freshworks CRM provides two options each of which has a basic functional difference in the code execution.

• Synchronous code: The scripts are loaded and executed sequentially.
• Asynchronous code: The scripts are loaded and executed concurrently. Since the scripts are executed simultaneously, there is a possibility of page flickering from the original page to the variation page. Hence, avoid using an asynchronous code for A/B testing and split testing.

• Click Copy Code to copy the JS code snippet. Instead, you can choose to send the code to an email id by clicking Send this code to Developer.
• Paste the copied code into the page(s) of your website. The JS snippet must be integrated into the Head tag of the website’s HTML code.
• If the code snippet is placed in the Footer tag, the code still works. But the original page appears first and then immediately changes to the variation page(if any), as the code kicks-in. To avoid such potential problems, add the JS snippet in the early execution path.
• Once the code is integrated into your webpage, it does not require modifications every time to run various experiments. Multiple tests can be performed with the same code snippet installed on the webpage, from the same Freshmarketer account.
• NOTE: However, If you need to run an experiment from a different user account, the existing code needs to be removed and replaced with the new code generated from the current account.
• You can check the integration of the code snippet by providing the URL of the code-integrated page(s).
• In the Tracking Code page, enter the URL of your web page in the Verify URL section.
• Click on Verify Installation to check if your integration is successful.

4. Web messenger

You can install chat messenger on your website for, 

• Website visitors who haven’t logged in 
• Logged in users 

Note: Paste the respective code snippet on every page of your website where you want your Chat messenger to appear.

• Website visitors who haven’t logged in
• To install the chat messenger on your website for visitors who haven’t logged in, You can use the first code snippet from Admin Settings > Web Messenger.
• For visitors who are logged in to your website, You can restore user conversations for logged-in users on your webapp, every time they initiate a conversation from a different device or browser. To do this, you need to set a unique external ID and restore ID for every user. 
• Use the following code snippet to identify logged-in users and restore conversations across browsers and devices.

• <!--Body-->
  function initFreshChat() {
      window.fcWidget.init({
          token: "WEB_CHAT_TOKEN",
          host: "WEB_CHAT_URL",
          externalId: '1234567',
          restoredId: restoreId ? restoreId : null,
          onInit: function () {
              window.fcWidget.on('widget:loaded', function () {
                  window.fcWidget.user.get(function (resp) {
                      var status = resp && resp.status,
                          data = resp && resp.data;
                      if (status !== 200) {
                          window.fcWidget.user.setProperties({
                              firstName: "John" /*user's first name*/ ,
                              lastName: "Doe" /*user's last name*/ ,
                              email: "john.doe@gmail.com" /*user's email address*/ ,
                              phone: "8668323090" /*phone number without country code*/ ,
                              phoneCountryCode: "+1" /* phone's country code*/ ,
                              plan: "Estate" /* user's meta property 1*/ ,
                              status: "Active" /* user's meta property 2*/ ,
                              "Last Payment": "12th August" /* user's meta property 3*/
                          });
                          window.fcWidget.on('user:created', function (resp) {
                              var status = resp && resp.status,
                                  data = resp && resp.data;
                              if (status === 200) {
                                  if (data.restoreId) { /* Update restoreId in your database*/ }
                              }
                          });
                      }
                  });
              });
          }
      });
  }
  function initialize(i, t) {
      var e;
      i.getElementById(t) ? initFreshChat() : ((e = i.createElement("script")).id = t, e.async = !0, e.src = "WEB_CHAT_URL/js/widget.js", e.onload = initFreshChat, i.head.appendChild(e))
  }
  function initiateCall() {
      initialize(document, "freshchat-js-sdk")
  }
  window.addEventListener ? window.addEventListener("load", initiateCall, !1) : window.attachEvent("load", initiateCall, !1); <!--Body-->

• External ID - This has to be unique to each logged in user. This information should be passed to Chat from your side. For example, a user’s email ID can be their external ID.

• Restore ID - This will be created by Chat when a logged-in user (from your webapp) initiates a conversation on Chat for the first time. Restore ID is also unique to each user. This ID will be passed to your website from Chat on the user creation callback function. You need to store this ID in your database. 

• The next time the same user starts a conversation through Chat, from a different browser or app, this restore ID, along with the external ID must be passed from your side to Chat for the user conversation to be restored. Otherwise every conversation initiated by the user on a new/fresh browser session will create a new user and the conversation history will be lost.
• Note:  Replace ‘Web Chat Token’ in the above code with your Chat token in Admin Settings > Web Messenger.Replace user values with your placeholders.