Articles on: How To Guides

How to upgrade from Legacy Widget?

The legacy widget (version 1) is deprecated and will stop working after March 31, 2021.

As of February 1, 2021, we introduced a new JavaScript SDK to render widgets and work with them. The solution is more interoperable, flexible, reliable, and easier to use. This is made possible by introducing major and breaking changes. Here are the steps for a safe upgrade:

Create a new widget from the Noticeable dashboard (select Widgets in the left menu and click the New Widget button), configure its style and behaviors using the new live editor. Ideally, test its integration in a non-production environment.
Remove all legacy widget code from your pages and add the new code snippet you got in step 1.
Remove the legacy widget entry from the Noticeable dashboard:



Make sure the legacy widget is no longer used on your pages before removing the entry (step 3) since the removal will prevent the old widget to load data.

What will happen when users load the new popup widget?



By default, users will see all publications you wrote on Noticeable as new. However, you can change this behavior when you configure the new widget. In the Widget tab, under field First Visit, choose Select what number of publications are new (unviewed). In the field that appears, enter 1 as value. This means that upon first visit the red badge will show 1 as the number of new publications:



We recommend publishing a new publication just before/after upgrading to the new widget.

Disabling local storage usage



The Noticeable Widget creates first-party cookies when you embed it on your pages. These cookies are necessary for technical and service purposes: restoring the widget states when browsing between your website pages and/or coming back on your pages later.

Some of the cookies are set in browser local storage and are thus removed only when a user deletes them or when the browser free up some space to reclaim storage. If for legal or other reasons you need to have all cookies to expire after a given duration, then you can change preferences using the Noticeable SDK:

https://help.noticeable.io/en-us/article/how-to-use-the-noticeable-javascript-sdk-7k5kc2/#3-set-global-preferences

Embedding a Newspage into your page



If you are embedding a Noticeable Timeline (now called Newspage) on your pages using directly an iframe, this will stop working after March 31, 2021. As a replacement, you need to use our Newspage embed widget. The change is purely technical and the aesthetic will remain the same.

How to create a Newspage Embed Widget?



Open the Noticeable dashboard.
Select Widgets in the left menu.
Click on the button named New Widget near the top right side. This opens the live editor for the widget you just created.
Change the Widget type to Newspage embed from Popup and edit the options you want:


Click on Install onto your site in the bottom right side.
Copy the code snippet that is provided and paste it into your page.
That's it. Enjoy 🎉

Why are we introducing this change?



Embedding Newspages onto your pages using a raw iframe is really simple but suffers from issues:

the iframe height does not adapt automatically to its content.
you cannot get the URL of a specific publication or open it directly (hash routing).
blinking may occur while the iframe loads a new page.

We were providing code in a Github repository to alleviate these issues but installation and updates were cumbersome.

The new Newspage Embed Widget is a 2-line code snippet to drop into your pages. It loads your Noticeable Newspages, automatically adapts its height based on the Newspage content, supports hash routing, and provides smooth loading animations. Besides, updates are automatic and segmentation can be used as with the other widgets.

Updated on: 12/03/2021

Was this article helpful?

Share your feedback

Cancel

Thank you!