Adding widgets is a common desire for businesses with a web presence and it's easy to do with the Run Free Project.
What are Site-Wide Widgets?
For the purposes of this article, a widget is any tool you can add to a site using code snippets. Examples include a pop-up dialog box (like this free one from ElfSight) that announces sales or prompts the shopper to subscribe to a newsletter, Facebook or WhatsApp to enable customer chat, behavior analytics tools like HotJar, or any of the millions of other JavaScript-based code snippets that can be placed in the header or footer of a web page to carry out a site-wide function.
Please note that many of the common website tools (such as Facebook Pixel, Google Analytics, and trackers associated with Run Free Project integrations like Klaviyo and Blueshift) require a simple copy/paste of account information within the Run Free project platform instead of a manual insertion of widget code snippets like those covered in this article. Please refer to each integration's documentation for more detail.
Header or Footer, Which is Best?
Simply put, adding widget code snippets to the footer instead of the header will make your web pages load faster.
Unless absolutely necessary, you should never add widgets to the header of a webpage or website. While the practice is commonly referred to by developers of these tools and some marketing agencies, it is bad practice and should be avoided at all costs.
The reason is that while a script (widget) is downloading, the shopper's browser won't start any other downloads (such as the actual contents of your shop web page). Thus, your shopper can experience a slowdown in page load times. If the provider of your widget content (Elfsight, Klaviyo, Facebook, etc.) is experiencing an outage, your store page may not load for your shopper at all. No bueno.
By placing scripts (widgets) in the footer instead, you minimize the potential for widget provider outages to break your user experience. This also ensures that your page contents load first, resulting a delay-free shopping experience for your users.
There are some widgets (we call them Page Widgets) that should be inserted into specific areas of the page like custom HTML blocks or product descriptions (such as this customizable form that prompts the shopper to fill out additional information for actions such as signing up for training classes) in order to present properly. Please refer to documentation on those tasks for best practices.
How to Add a Site-Wide Widget to Your Run Free Project Store
It's a simple three-step process...
1: Get the Code Snippet from the Widget Provider's Site
Go to the widget provider's platform dashboard (i.e. Elfsight or UserWay), choose your widget, configure the widget there (such as selecting the widget's location on the page) depending on available options and your preferences. Then, copy the JavaScript code snippet from their site (often referred to as embed script, the code snippet you want to copy will begin with <script>).
2: Paste the Code Snippet into Your Run Free eComm Site
Next, log into your Run Free Project admin dashboard, select layout, then content.
Next, look for the "Template: Footer" content type in your list of existing content entries. If you have one, click to edit it. If you don't, click Add Content.
In either case, once the content editor screen opens (as shown below), click source, then paste the widget's JavaScript code snippet you copied from the previous step into the text box and click save.
Note: Be sure you click the source button (circled in red below) before pasting the widget code snippet. If you skip this step, your widget will not work
When you reload your site, the widget will magically appear where you configured it to show up, providing a myriad of awesome tools to you and the shoppers who visit your store.