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.
TABLE OF CONTENTS |
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.
- 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.