Skip to main content
menu-icon.png

 

x
Optimizely Knowledge Base

Add a COVID-19 info banner without code in Optimizely

THIS ARTICLE WILL HELP YOU:
  • Add a COVID-19 info banner to your site without using any code

Info banners are useful for emphasizing information including a call to action on your website, like informing visitors about a particular important topic (such as the current COVID-19 outbreak). You can use Optimizely to add a COVID-19 info banner to your site using the Optimizely COVID-19 Banner extension—you don't need to know how to code! Read on to learn how.

This extension will work with most websites, but it may not work with all websites. 

Create a COVID-19 banner extension

  1. Navigate to Implementation > Extensions.

  2. Click Create New... and select Using JSON.
    json-extension.png

  3. In a second browser tab, open COIVD-19 config.json and copy all 71 lines of code.

  4. In your Optimizely tab, paste the code in the Create Extension From JSON field and click Create Extension.
    Add_COVID-19_Banner_Extension_JSON_1.png

  5. Click the extension name (COVID-19 Banner) to open the Extension Editor. In the Editable Fields panel, you can change the text, the call-to-action (CTA) text and link and the background color.

    COVID-19_Banner_Extension_Settings_1.png

    Scroll down to the bottom of the Editable Fields panel to change the text color and the font weight. Developers can also code extensions further to look and behave as desired.

  6. Click Save.

Enable the COVID-19 Banner extension

Here's how to enable the COVID-19 Banner extension, with steps listed below:

Enable_COVID-19_Banner_Extension.gif

  1. Navigate to Implementation > Extensions.

  2. Click the ... icon for the COVID-19 Banner extension and select Enable.

Now, you'll be able to add your banner extension to experiments!

Add your COVID-19 banner to an experiment

Here's a quick look at how to add your COVID-19 banner to an experiment, with step-by-step instructions below.

Add_COVID-19_Banner_to_experiment.gif

  1. Navigate to Experiments and select the experiment where you want to add the banner.

  2. Select the variation where you want to add the banner.

  3. Click Create.

  4. Under Create Options, select COVID-19 Banner.

  5. Customize the banner fields specifically for this experiment. You can change the text, call-to-action (CTA) text and link, background color, text color and font weight.

  6. Click Save.

  7. Delete the Original variation to show the banner to all your visitors.

  8. Test your changes and if satisfied, proceed to publish your experiment

More resources

Learn more about Optimizely extensions.

Check out the full set of Optimizely's sample extensions in the Optimizely Extension Library on GitHub.