Pop-Up Window

Agency Managers can now configure and add a pop-up window for one or more pages on your website. Each agency configures its own pop-up windows. 

How to access the pop-up window configuration

After you've logged in to your website and selected the edit button, you'll see a new link titled Configuration. Select that link to see the pop-out links of User interface > Popup message. Alternately, if you click on Configuration, the Popup message link will appear below.

Turn the pop-up on or off

To turn the pop-up window on or off, use the Enabled toggle. When disabled, the pop-up never shows.

Add a title for your pop-up message

The required title you add for your pop-up message will appear at the top of the message box in the color of your website theme. 

Message body

The Message body field is where you compose the message you would like to appear in the pop-up window. This message text can be formatted with basic formatting (bold, italic, lists). You can add a link to another page using the linking tool in the WYSIWYG toolbar. The pop-up window can be closed by selecting the X in the top right corner. 

Text format options

The Text format dropdown simply changes the text editor options for the WYSIWYG toolbar. Each option (Basic, Limited, Restricted, Microcontent) comes with its own set of available formatting buttons and permissions. Since Microcontent is the most complete and feature-rich option, it is set as the default choice for the pop-up.

Settings

The Settings area is where you control the size of the pop-up window, how long after the page loads before it opens/pops up, how long it should remain open, and how long before it automatically closes.

• Window width and Window height control the size of the pop-up window. The default is set to 750 pixels wide by 500 pixels high.
• Delay is the number of seconds before the pop-up appears after the page loads. The default is set to 0 seconds so the pop-up window appears as soon as the page loads.
• Delay before auto close is the number of seconds before the window automatically closes. The default is set to 0 so the pop-up window needs to be manually closed. You can edit that setting to the number of seconds you'd like the pop-up window to remain open. It can still be closed manually.
• Background opacity (%) controls the opacity of the webpage behind the pop-up window. If you would set the Background opacity to 0, the webpage behind the pop-up window wouldn't look any different. If you set the Background opacity to 100, the webpage behind the pop-up window will appear black. The default is 70%, which makes the page behind the pop-up window appear grayed out so it's easier to read the content of the pop-up window.
• Pop-up style dropdown contains some options for how the pop-up looks. If you choose Black, the pop-up window will appear with a thick, black border. Default shows no border. Choosing Green will show a thin, green border around the pop-up window. Light shows a thin, white border. 

Cookie settings

Check cookie options allow you to either enable or disable whether the user's browser checks to see if the user has visited your website before. 

Enabled means the user's browser will check every time the user visits your website. The browser will check for the number of days you have entered in the Cookie lifetime in days field. If you want the browser to check for a year, you'd enter 365 in the Cookie lifetime in days field; if you want their browser to check for a month, you'd enter 30. If they have visited within the number of days you've specified, the pop-up window will not appear. For example, if you've specified 30 days, their browser will check if it's within the 30-days and not show the pop-up window. If it's day 31 since they visited last, the pop-up window will appear for them.

Disabled means their browser will not check, so the pop-up will appear every time they visit your website.

If Enabled is checked, but the Cookie lifetime in days is set to 0, the pop-up will reappear only if the browser has been closed.

Pages

Show block on specific pages means Show the pop-up window on specific pages.

• All pages except those listed means show the pop-up window on all pages except the pages entered in the Pages field.
  • If you don't want the pop-up window to appear on your website home page, you'd enter <front> in the Pages field.
  • If you don't want the pop-up window to appear on the admin page when you're creating your pop-up window, you can enter admin/* in the Pages field.
    Tip: If you allow the pop-up window to be shown in edit mode while you're creating it, show it on the admin page. You can see the pop-up while creating it every time you save the page, and you don't have to add to other pages for testing until you're ready to display the pop-up window on your website. The colors and borders might look a bit different, but for testing the content this works well.
  • If you have a whole section/directory of your website where you don't want the pop-up window to appear, you can prevent it from appearing on all the pages of that section.
    Example: If you want to exclude all the pages within the basics-training section of your website at dxtraining.iowa.gov/basics-training/ AND want to exclude the home page or landing page of that section, you would need to make two entries in the Pages field: enter basics-training for the home page or landing page of that section AND enter basics-training/* using the asterisk as a wild card to tell Drupal not to allow the pop-up window on anything within the basics-training directory. Enter one path per line. The entry in the Pages field would look like this:
    basics-training
    basics-training/*

• Only the listed pages means only show the pop-up window on the pages listed in the Pages field. This allows you to show the pop-up window on specific pages or in specific sections of your website. You can use an asterisk as a wild card to tell Drupal to allow the pop-up window on all pages within a section.
  Example: If you want to only show the pop-up window within the basics-training section of your website at dxtraining.iowa.gov/basics-training/ AND you want it to show on the home page or landing page of that section, you would need to make two entries in the Pages field: enter basics-training for the home page or landing page AND enter basics-training/* using the asterisk as a wild card to tell Drupal to allow the pop-up window on anything within the basics-training directory. Enter one path per line. The entry in the Pages field would look like this:
  basics-training
  basics-training/*

Tip: If you want to show a pop-up on only one page within your website, set Enable Popup = Enabled and Pages = Only the listed pages.  In the Pages field, list only that one path.