Please, note that: You will receive the notifications on the email address and mobile number that you used to register your Esesito account.

With our Custom Code feature, you can integrate countless third-party tools with your website. This feature enables anyone to add custom HTML code to their website. With this, you can connect widgets from different sources. From HubSpot to HotJar to Google Analytics, several services of interest to your business provide code snippets that you place on your website. These third-party integrations enable a whole new set of features that we don’t have in our product. These are grouped into four areas: real-time interactions with your visitors, capturing visitor info, analytics/tracking and a broader “do more” category.

Use Cases for Custom Code #

Analytics & Tracking #

To better understand your visitors, you can integrate with Google Analytics, Mixpanel or Hotjar, among other tools. These give you accurate insights into what your users are doing on your website.

Real-time Interactions #

Custom code enables the integration of live chat from different providers, such as Facebook Messenger, Freshdesk or Intercom.

Capturing Visitor Info #

You can integrate third-party tools to collect visitor information, such as inline forms, subscriptions to a mailing list or embedded surveys. Mailchimp, Hubspot or Typeform offer these solutions.

“Do More” #

This is a broader group to accommodate almost everything you may want to share with your customers, like embedding live streams or podcast players from Spotify or Mixcloud, or do with your visitors, like accepting donations.

Managing Custom Code #

You can currently enable Custom Code from Settings or you can also add Custom Code sections to each page of your website with our latest function, Advanced Layouts. In this article, we will show you these different ways to enable Custom Code on your Esesito websites.

Adding Custom Code from Settings  #

With this feature, you can include different custom code snippets in three distinct areas of your website: Header, Body and Footer. Don’t worry! Usually, the tool providing you with the code explains where to best place your code. The widget will then appear on your homepage.  

Here’s how you can do it:

1. First, click here to access your website editor
2. Click on the Settings section and then scroll down to the Custom Code area
3. In this example, we will add a Live Char widget from Freshdesk. Simply place the code from Freshdesk in the Head section.
   • By default, some third-party tools appear on the bottom right corner of your website. Enable the Prevent Content Overlap on Mobile toggle to remove Esesito default widget.
4. Click Save. You can then go to your website and check the changes!

Removing Custom Code #

To remove any custom code you previously configured, just repeat the steps above to go to the Custom Code settings page and delete the content from the Custom Code box. When you click the Save button, Esesito removes the Custom Code from your website immediately!

Adding Custom Code Section to Pages on Advanced Layouts #

You can also include different custom code snippets into different pages of your website. In this example, we will be adding a custom form to capture customer visitor information through a subscription box. 

Here’s how you can do it:

1. First, click here to access your website editor. Make sure that you have enabled Advanced Layout following instructions in this article.
2. Click on Pages and choose the Page that you want to add your widget. 
3. We will add the MailChimp form to capture visitor information to the Contact page – simply click on Contact. If you want to add your widget to any other pages, you can follow the steps just the same way! 
4. Choose Add Section and scroll down to select Custom Code. 
5. To add a new code, click on New Custom Code 
6. Simply fill in the Title of your form and paste the Custom Code into the box provided and click Save!

Note that Custom Code is not rendered in the Editor Preview window, you have to actually visit your website to see your changes!

This is how the widget will look like on your site: 

To change the position of your widget on each individual page, simply click on Edit and choose where you would like to place it.

You can also remove the widget by clicking on the icon next to it. 

Although the widget is removed on your page, it will be kept in the Custom Code Library. The Custom Code library stores all your HTML codes which you have added to your websites. Even if you remove these from your page, the codes will be kept in the library so that you can reuse these in the future. 

For example, you may want to move the widget and place it on a different page, they are easily accessible as follows: 

You can access the Custom Code Library through Settings > Custom Code and scroll to the bottom where you can see and edit the codes you have previously used on your website. If you want to add one of the widgets back to your pages, simply add a new section and select the code you need from the library options in the interface. 

Please note: You can seek additional help on this feature by using the Request Edit feature inside the Hub under Pro Features  

Need a hand?
If you need any further assistance, please message our support team or get real-time help on our Live Chat!