Add a COVID-19 info banner without code in Optimizely Web Experimentation

  • Updated

Table of Contents

This topic describes how to:
  • 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 Web Experimentation to add a COVID-19 info banner to your site using the Optimizely Web Experimentation COVID-19 Banner extension—you do not 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 COVID-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

Enable the COVID-19 Banner extension with the 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 can add your banner extension to experiments!

Add your COVID-19 banner to an experiment

Add your COVID-19 banner to an experiment with the step-by-step instructions below.

Add_COVID-19_Banner_to_experiment.gif

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

  2. Select the variation for which 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 Web Experimentation extensions.

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