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
, anddelay
- 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 thecontinuallySettings
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".
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 widgetfalse
- (default) shows the widget
<script>var continuallySettings = {appID: "xyz1234", hideWidget:true};</script>