Control Continually's loading behaviour

In this article

You can use our JS API to minimise any impact your bot has on page speed and make sure your website always loads quickly for visitors πŸš€

For most websites, you can add our embed code and you'll be all set. If you want more control over how the page loads, we've added some advanced options so that you can fine-tune performance, 

Highlights

  • set your bot to wait until the page is fully loaded β€” all assets, fonts, other page elements have finished loading β€” with loadOn: pageReady
  • control when you want the bot to start loading by setting two new parameters: loadOn, and delay
  • add a defer attribute to your embed code so that the script is not executed until the rest of the page is fully loaded
  • safely call our JavaScript API before our script has loaded with a new event handler, ready:function(api){}, in the continuallySettings object

Choose when you want your bot to load

Add a parameter to your embed code to specify whether the bot should load on pageInteractive or pageReady. There are two options: 

  • loadOn: pageInteractive (default)
  • loadOn: pageReady

We've made  pageInteractive the default so that your bot is available for visitors. This is important if you want to start the bot automatically, or to open the sidebar when the page loads.

What's the difference betweenpageInteractive and pageReady?

Google measures how fast or slow a website is using the metric   Time to Interactive. This is the point at which it considers the page loaded for visitors and SEO.

loadOn: pageReady

To make sure that the rest of the page has finished loading before starting your bot, we listen for the  window.onload event in the visitor's browser. 

Set this parameter when you want to make sure other parts of your page load before your bot.

If you use this setting, be sure to test that the bot loads as expected across all pages on your site using a range of browsers. We've found that other scripts on the page β€” like lead tracking or heatmap tools β€” can block the bot from loading by repeatedly pinging their server so that the load event isn't triggered.

You can set  loadon: pageReady by adding an extra parameter to the continuallySettings object in the first line of your embed code: 

<script>var continuallySettings = {appID: "ne9y6pm2yzkg", loadOn: "pageReady"};</script>.

loadOn: pageInteractive

This is how the bot will load by default. It will make sure you want your bot is available to end users as quickly as possible, even if some other parts of the page are still loading.

Set your bot to load after a delay

Google says this about page speed:

Load is not a single moment in time β€” it’s an experience that no one metric can fully capture. There are multiple moments during the load experience that can affect whether a user perceives it as "fast" or "slow".

β€” Google's Lighthouse docs

Each web page is unique. 

So that you can set how your bot loads in a way that's right for you, you can set your bot to wait for the page to fully loaded plus an additional amount of time by adding an extra parameter to the continuallySettings object in the first line of your embed code: 

<script>var continuallySettings = {appID: "ne9y6pm2yzkg", delay: 3000};</script>

The value should be a number, and represents the number of milliseconds we should wait before loading your bot.

Using delay with your own button

If you are using your own button by assigning a  continually class, we won't be aware of any clicks on that button before our script has loaded.

You can deal with this by using our new event handler, described in section 4 below.

What about GTMetrix and fully loaded time?

GTMetrix is a popular tool for measuring page speed. In 2017 they introduced a different method to Google for describing page speed,  fully loaded time

According to GTMetrix, this the point after the Onload event fires and there has been no network activity for 2 seconds.

Because our script, like all bot platforms and live chat widgets, carries out activity after the page has loaded, this can cause the GTMetrix report to show the site as loading more slowly than it does for your visitors or for Google.

You can now defer your bot from loading until after GTMetrix considers the page fully loaded by setting a delay:

<script>var continuallySettings = {appID: "xyz123456", delay: 3000};</script>

Add a defer attribute to your embed code

The defer attribute tells the browser to download the script but only execute it once the HTML document has been fully parsed.

Our script is small - only 9kb - so the initial download will only take a few milliseconds to download when you use defer.

This means the file can be downloaded while the HTML document is still being parsed by the browser, but it won't delay or block the rendering of the page. 

<script>var continuallySettings = {appID: "xyz1234"};</script> 
<script src="https://cdn-app.continual.ly/js/embed/continually-embed.latest.min.js" defer></script>

This is faster than placing the script at the end of the body as the external script will be downloaded earlier. Browser support for the defer attribute is very good, with the exception of Opera Mini.

Hide your widget

We created a new attribute that hides your widget. The widget will be hidden no matter what. This also banishes our Live Chat notifications that we send to leads in a widget. 

Attribute name: hideWidget

Possible values:

  • true - hides the widget
  • false - (default) shows the widget
<script>var continuallySettings = {appID: "xyz1234", hideWidget:true};</script>
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.