Each component must have at least one property, but typically a component has many properties.

Create a new property

To add a property to a component:

1. From the CMS, select the Hierarchy button and chose the Client level. Properties can only be created at this level.

2. Select the component manager button.

3. Search for the component that you wish to add a property to and select edit. (Optionally, select + add new to create a new component.)

4. Select + add new property. The property creation screen appears.

5. Fill in the property's information.

6. Select save in the property's edit column.

Edit an existing property

To edit a component's properties:

1. From the CMS, select the Hierarchy button and choose the Client level. Properties can only be edited at this level.

2. Select the component manager button.

3. Search for the component that you wish to edit.

4. Select the edit button corresponding with your desired component. The property manager will display below.

5. Navigate to the desired property and perform your desired edits.

6. Select either save or save as new.

Remove a property

To remove a property from a component:

1. Select the component manager button from the CMS.

2. Search for the component that you wish to remove a property from.

3. Select the edit button corresponding with your desired component. The property manager will display below.

4. Find the desired property you wish to remove from the list and select delete.

This section of the guide contains tutorials, how-tos, and reference material for the Subscription Panel. Here you will find in depth information for working with the Subscription Panel. This section covers the following topics:

• Component matrix

• Create, edit, or remove component properties

• Create, edit, or delete a Presentation Template

• Create, edit, delete, import or export Presentations

• Preview a Presentation

At the end of the section you will find detailed Tutorials and step-by step guides and Reference documentation.

The matrix below defines each component. Each tab represents a component class and has a table that describes the component and lists each possible parent and child components.

Some components include images. Please note that before adding an image to a component you should upload it in the Image Gallery using Images section in CMS.

For the Subscription Panel Images the following sizes/resolutions are recommended:

You can only edit Presentation Templates at the Client hierarchical level.

To create a new Presentation Template:

1. From the CMS, select the hierarchy button and choose the Client level.

2. Select Subscription Panel, then choose Structure Admin.

3. Select + add new template. The template creation screen appears.

4. Choose a Template Name and Presentation Type. Note: each Presentation Type has a unique tree structure. If you change the Presentation Type after having made some edits, the new tree structure will delete the existing tree structure and you will lose your edits.

To edit a Presentation Template:

1. From the CMS, select the hierarchy button and choose the Client level.

2. Select Subscription Panel, then choose Structure Admin.

3. Select an existing Presentation Template from the selected drop-down menu.

4. Perform any edits you wish to make, then select save. Typically, edits at this stage will be the inclusion of various components. View the tutorials section for more information.

To duplicate a Presentation Template:

1. From the CMS, select the hierarchy button and choose the Client level.

2. Select Subscription Panel, then choose Structure Admin.

3. Select an existing Presentation Template from the selected drop-down menu.

4. Select the duplicate button. The duplicated Presentation Template will appear in the drop-down menu. Select it to change its name.

To delete a Presentation Template:

1. From the CMS, select the hierarchy button and choose the Client level.

2. Select Subscription Panel, then choose Structure Admin.

3. Select an existing Presentation Template from the selected drop-down menu.

4. Select the delete button. Confirm you wish to delete this Presentation Template and select Yes. The template will be removed from the drop-down menu.

Common query parameters

The table below defines the common query parameters. Of these, the most common (and important) are ofrgp_code and promo_code, which define what offers and promotions are presented to customers. The table below defines the common query parameters used for analytics.

Google Analytics

Google Analytics captures every triggered event on the Subscription Panel through the G2Plugin. In the table below you can find the list of the events and their description.

A Presentation URL consists of three things:

• Base URL - Need a definition/where does this come from? (e.g. checkout-demo.subscriberconcierge.com)

• Presentation URL - this is akin to a path parameter. You create this in the Presentations section of the CMS (CMS > Subscription Panel > Presentations).

• Query Parameters - options that define your request further.

Below is the formula example:

{Base_URL}/{Presentation_URL}/{Query_Parameter1=Value1}&{Query_Parameter2=Value2}

As an example:

• For the {Base_URL}, you might use: checkout-demon.subscriberconcierge.com

• For the {Presentation_URL}, you might use: CouponCode

• For the {Query_Parameter1=Value1}, you might use: sideCode=maa

• For the {Query_Parameter2=Value2}, you might use: zipCode=95988

The complete URL looks like the following:

checkout-demo.subscriberconcierge.com/CopuponCode?siteCode=maa&zipCode=95988

You can preview a Presentation at any time with the preview button.

To preview a Presentation:

1. From the CMS, select the hierarchy button and choose an option from the Newspaper level.

2. Select Subscription Panel, then choose Presentations.

3. Select the desired Presentation you wish to preview from the selected drop-down menu. Greyed Presentations are inactive.

4. Select the preview button. A preview window will appear. If you've recently made changes, clear your cache first. Select Manage Cache then Refresh CMS + Panel.

Welcome

Welcome to the Subscription Panel User Guide!

The Subscription Panel is an application that allows potential customers to purchase subscriptions. You can manage the look, feel, and content of the Subscription Panel in the CMS. Every detail is manageable, from what offers display to what colors are used.

Guide structure

This guide is composed of the following main elements:

• Overview - gives a brief introduction to the various features covered in this guide

• Tutorials - task-based guides for common Subscription Panel tasks

Creation/import

You can either create a new presentation or import a presentation from a JSON file.

Import a Presentation

To import a Presentation:

1. From the CMS, select the hierarchy button and choose a hierarchical level (Client, Newspaper Group, or Newspaper).

2. Select Subscription Panel, then choose Presentations.

3. Select the options drop-down and choose import.

4. Select a file then select import.

If successful, your new presentation should appear under the presentations drop-down menu.

Create a Presentation

Prerequisites

Each new Presentation should meet the following criteria:

• Have a unique Presentation Name (cannot be blank) that contains only digits and latin letters

• Have a unique Presentation URL

• Have a Presentation Type

• Contain valid parent-child relationships between components.

• Contain the following main components:

  1. Presentation Properties

  2. Header

  3. Page

  4. Step

  5. Confirmation

  6. Order Summary

Typical Presentation Component Layout

Procedure

To create a new Presentation:

1. From the CMS, select the hierarchy button and choose a hierarchical level (Client, Newspaper Group, or Newspaper).

2. Select Subscription Panel, then choose Presentations.

3. Select add new presentation and choose an option:

   A blank presentation contains no components.

   Save section as new reuses components. Changes made to components in this presentation will affect other presentations using these components.

   Duplicate selection makes copies of the components for this presentation. Changes made to components in this presentation will not affect other presentations.

   Note: if either saving as new or duplicating, select a presentation to work from the drop-down menu first, then choose your option.

4. Based on your selection, continue to the corresponding section below for further steps.

Blank Presentations:

1. Add a presentation URL, presentation name, and presentation type to your new presentation.

2. Choose whether you want the presentation to be a default presentation and whether its status is active/inactive.

3. Use the component selector sidebar to add your components.

4. Select save.

Save Section as new:

1. Change the presentation's name and URL to something unique.

2. (Optionally, rename the components using the Component Renaming Tool. Once finished, select save and close. If you don't want to rename the components, select the x to exit from the tool).

3. Select save to finish.

Duplicate section:

1. Change the Presentation's name and URL so that they are unique, then select ok.

2. (Optionally, rename the components using the Component Renaming Tool. Once finished, select save and close. If you don't want to rename the components, select the x to exit from the tool.)

3. Select save to finish.

Edit, delete, or export Presentations

You can edit and delete Presentations.

Edit

To edit a Presentation:

1. From the CMS, select the hierarchy button and choose a hierarchical level (Client, Newspaper Group, or Newspaper).

2. Select Subscription Panel, then choose Presentations.

3. Select the desired Presentation you wish to edit from the selected drop-down menu. Greyed Presentations are inactive.

4. Make your desired changes to the Presentation. To add a component, drag them from the Component Selector sidebar. To remove a component, select the remove button next to the desired component.

5. Select save once finished.

Undo a change

If at any time you've made a mistake that you wish to undo, select the cancel button. Any changes will be removed and the Presentation screen will disappear.

Delete

When you delete a Presentation you are not deleting components. They will still be available in the Component Manager section.

To delete a Presentation:

1. From the CMS, select the hierarchy button and choose the Client hierarchical level.

2. Select Subscription Panel, then choose Presentations.

3. Select the desired Presentation you wish to delete from the selected drop-down menu. Greyed Presentations are inactive.

4. Select delete. Confirm this is the correct Presentation and select Yes.

Export

You can export Presentations as either a JSON or HTML file.

To export a Presentation as JSON:

1. From the CMS, select the hierarchy button and choose a level (Client, Newspaper Group, or Newspaper).

2. Select Subscription Panel, then choose Presentations.

3. Select the options drop-down, then choose export.

4. Select which Presentation(s) you want to export. The show advanced button allows you to include entity, property, and dictionary types as well as structure templates into the JSON file.

5. Select export content. The download dialogue will appear. Note: if you chose many Presentations or the Presentation is large, it may take longer for the dialogue to appear.

To export a Presentation as HTML:

1. From the CMS, select the hierarchy button and choose a level (Client, Newspaper Group, or Newspaper).

2. Select Subscription Panel, then choose Presentations.

3. Select the Presentation you wish to export from the selected drop-down menu.

4. Select the options drop-down, then choose Business export. The download dialogue will appear.

Overview

The guide below outlines the common properties of some common components. Each heading denotes a component and defines that component's properties.

Presentation Properties

Header

Landing Tiles

Page

Offer Selector

Promotion Digital and Promotion ZipCode

Step

Delivery Information and Billing Information

Footer

Cookie Notice

Idle Popover

Abandonment Popover

Registration on Confirmation

Order Summary

Subscription Panel is a customer-facing application that allows users to view offers and then make a subscription purchase.

The Subscription Panel features work in tandem with the CMS Hierarchy and Cache Management features. This section discusses both the CMS Hierarchy feature and Cache Management feature, as well as the Subscription Panel features. The Subscription Panel is comprised of three subsections:

• Component Manager

• Structure Admin

• Presentations

Diagram

This diagram illustrates how the Subscription Panel, CMS, and Cache Management feature work in tandem.

While this picture shows where at the screen you can get access to Cache management, CMS hierarchy and Subscription Panel block

CMS Hierarchy

Description

There are three levels in the CMS Hierarchy:

1. Client

2. Newspaper Group

3. Newspaper

Newspapers are a part of a Newspaper Group, and a Newspaper Group is a part of a Client. Settings can be applied at each level, but settings at the Client level act as the default and apply to lower levels as well. However, changes made at lower levels (e.g. Newspaper or Newspaper Group) will not automatically apply to higher levels. Lower level changes are called overrides since they override higher level settings.

Choose a hierarchy

You can navigate between the hierarchical levels. To do so:

1. Select the hierarchy button. (The button will display the current level’s name.) After selecting the button, the CMS Hierarchy screen will appear.

2. Choose the level you wish to be on. The window will disappear. Any change you now make will apply to the selected and lower levels.

Overrides

There are two types of overrides for the Subscription Panel section of the CMS:

• structural overrides - these apply to changes in the structuring of different components (e.g. changing parent/child relationships or their location)

• property overrides - these apply to changes of a component’s property (e.g. changing the color of a component)

Remove structural overrides with the remove overrides button and remove property overrides with the wastebin icon located next to the component in question.

Cache management

Description

This feature clears your cache so that any changes you make take effect. You will want to use CMS + Panel button to clear the caches of the CMS and Subscription Panel feature.

If your cache was successfully cleared, a success banner appears at the bottom of the screen.

Component Manager overview

Description

The Component Manager subsection allows you to manage your Subscription Panel components. Components are the building blocks for your presentations. Each component has a name, class, and code. Components themselves contain various properties, which you can manage when you edit or create a component.

Each component is comprised of the following things:

• Name - The display name for the component

• Class - The overarching class the component falls into (e.g. address components or payment components)

• Code - The code used to call and refer to the component

UI

The image below depicts the Component Manager UI.

If you select the + add new button to create a new component, the following screen appears.

Structure Admin overview

Description

The Structure Admin subsection allows you to structure components to build a Presentation Template. Whereas components are just the building blocks of your presentation, a template is the arraignment of the building blocks in a particular way.

Typically you will need only a single Presentation Template. It contains a Template Name and a Presentation Type, and is comprised of various components.

You can drag the components to arrange their order, or designate certain components as either a parent or child component.

UI

This image shows two components. One is a parent component and has multiple child components.

This image shows the component selector tool. Use it to drag components into your Presentation Template.

Presentations overview

Description

The Presentations subsection allows you to manage the presentation of your arranged components. Instead of creating or arranging components, you are creating, previewing, editing, or deleting the final presentation of all of your work. Similar to how you use various components to create a Presentation Template, you now fine tune your Presentation Template(s) to create various Presentations.

UI

You can either create a new presentation, import a presentation (JSON), or select an existing presentation.

When creating a new presentation:

- a blank presentation is a presentation with no components.

- save selection as new reuses the same components for multiple presentations, which means changes at the component level will affect both/any presentations using these components.

- duplicate selection creates copies of the components to use in a new presentation, which means changes at the component level will not affect other presentations.

This image displays the various features of the Presentations menu:

After selecting/creating/importing a presentation, you can:

• preview your presentation (to preview, you must be on a Newspaper level with your CMS hierarchy.)

• set whether your presentation is active/inactive, which determines whether your presentation can be seen by end-users

• set whether your presentation is a default presentation

• manage your various components

Add a landing to a Presentation

A landing page hosts desired Offer Groups that you want potential subscribers to see immediately.

To add a landing to your Presentation, make a landing component (e.g. Landing - Tiles V3, Landing - Tab V3, etc. ) a child of the Page V3 component, then add any desired promotion components as children of the landing. Which ever promotions components you choose will appear on the landing page.

Step-by-step guide

Arrange the components:

1. From the CMS, select the hierarchy button and choose a level (Client, Newspaper Group, or Newspaper).

2. Select Subscription Panel, then choose Presentations.

3. From the drop-down menu, select the Presentation you wish to add a landing. The Presentation's structure and components will appear below.

4. Add or drag your desired landing component into the Presentation and make it a child to the Page V3 component.

5. Expand the landing component to display its children, then add promotion components as children (e.g. Promotion Digital V3, Promotion ZipCode V3, etc).

Next, configure the promotion component's properties. Select the details button to expand the component's properties.

At minimum, the component needs a name. However, we suggest you configure the following properties for Promotion Digital V3 :

• Title - the title that displays above the promotion.

• Body - the text that displays in the promotion's body.

• Image - the image in the promotion's body.

• Button text - the text displayed in the button.

• Button OfferGroupId - add the promotion's Offer Group ID to this property. This links this promotion component to the promotion in the circulation database.

And for Promotion ZipCode V3:

• Title - the title that displays above the promotion

• Body - the text that displays in the promotion's body.

• Image - the image in the promotion's body.

• Button text - the text that displays in the button.

• Button offer groupId - add the promotion's Offer Group ID to this property. This links the promotion component to the promotion in the circulation database.

• NoOffersAvailableMessage - add a message to this property. This displays a message to users when there are no offers available to them (usually because of location).

Add social media icons at the confirmation screen

You can add social media icons to your confirmation screen. Each social media element has it's own component. Each Social Media V3 component must be a child of the Confirmation V3 component, which is a child of the Page V3 component.

Before you start

Before you follow the steps below, be sure that the Confirmation V3 component is a child of the Page V3 component.

Step-by-step guide

Arrange the components:

1. From the CMS, select the hierarchy button and choose a level (Client, Newspaper Group, or Newspaper).

2. Select Subscription Panel, then choose Presentations.

3. From the drop-down menu, select the Presentation you wish to add social media components to. The Presentation's structure and components will appear below.

4. Drag a Social Media V3 component into the Presentation and make it a child to the Confirmation V3 component. Note: Each social media icon requires it's own component. For instance, if you want icons for Facebook, Twitter, and LinkedIn, you will need three social media components.

5. Select save.

Configure various component properties:

1. Navigate to the social media components.

2. Expand each social media component and fill out the SocialMedia Link SocialMedia Type properties. Example: For Twitter, enter www.twitter.com for the link and select Twitter from the type drop-down menu.

3. (Optionally, configure the SocialMedia Header [e.g. "Follow us on"].)

4. Select save.

Add app-download buttons to the confirmation screen

You can add app-download buttons to the confirmation screen. Currently we support buttons for the Apple App Store and the Google Play Store. Each app store button needs its own App Downloads V3 component, which must be a child of the Confirmation V3 component.

Before you start

Before you follow the steps below, be sure that the Confirmation V3 component is a child of the Page V3 component.

Step-by-step guide

Arrange the components:

1. From the CMS, select the hierarchy button and choose a level (Client, Newspaper Group, or Newspaper).

2. Select Subscription Panel, then choose Presentations.

3. From the drop-down menu, select the Presentation you wish adding download buttons to. The Presentation's structure and components will appear below.

4. Drag a App Downloads V3 component into the Presentation and make it a child to the Confirmation V3 component. Note: Each app store icon its own component. For instance, if your app is in both the Apple App Store and the Google Play Store, you will need two components.

5. Select the Details button next to each component, and add the corresponding AppDownloads Link (e.g. www.google.com).

6. Select save next to each component to save your work.

Configure various component properties:

1. Navigate to the Confirmation V3 component that is the parent to your App Downloads V3 components.

2. Select the Details button to expand the component's properties.

3. Toggle AppDownloads.Show to ON.

4. (Optionally, configure the AppDownloads Header [e.g. "Download our apps].)

5. Select save.

Other non-mandatory properties:

• AppDownloads.Subtitle - Subtitle to the header

• AppDownloads.Image - adds a background image

• AppDownloads.Styling.Background - changes the background color

Configure an upsell offer

An Upsell Offer is a more expensive offer that you can present to your customers. You can add upsell offers to your Presentation by adding the Upsell V3 component as a child to a Step V3 component. Typically, the Upsell V3 component is added to the second Step V3 component of the third Page V3 component .

Before you start

Before you continue to the tutorial steps below, be sure you have configured your Upsell Offer in Solicitor Concierge.

Step-by-step guide

Arrange the components:

1. From the CMS, select the hierarchy button and choose a level (Client, Newspaper Group, or Newspaper).

2. Select Subscription Panel, then choose Presentations.

3. From the drop-down menu, select the Presentation you wish to add an upsell feature to. The Presentation's structure and components will appear below.

4. Drag the Upsell V3 component into your Presentation and make it a child to any Step V3 component.

5. Select save.

Configure various component properties:

1. Navigate to the Upsell V3 component and select the details button.

2. Toggle Offer ShowImage to On.

3. Toggle Offer MarketingTitle Show to On and add text to the InlineTitle and Offer MarketingTitle Textproperties.

4. Select save.

Ask for registration password only at confirmation

You can arrange your Subscription Panel to ask for a user's registration password after they've finished purchasing, at the confirmation screen. The component checks the user's email to see if it has already been registered, and if it has not, it will prompt for a registration password.

This often leads to more customer retention, and makes the checkout process efficient. Todo this, the Registration on Confirmation V3 component needs to be a child of the Confirmation V3 component. Follow the instructions below for a step-by-step guide.

Step-by-step guide

Arrange the components:

1. From the CMS, select the hierarchy button and choose a level (Client, Newspaper Group, or Newspaper).

2. Select Subscription Panel, then choose Presentations.

3. From the drop-down menu, select the Presentation you wish to edit. The Presentation's structure and components will appear below.

4. Using the Component Selector tool, drag the Registration on Confirmation V3 component into your Presentation and make it a child to any Confirmation V3 component.

5. Select save.

Configure various component properties:

1. Navigate to the Registration on Confirmation V3 component and select the details button.

2. Toggle Password Show to On.

3. Toggle Password Validation Required Apply to On.

4. Add text to the Title property (e.g. "Create a password") and Button Text property (e.g. "Submit").

5. Select save.

Add an abandonment popover

An abandonment popover is a popover that appears whenever a user moves their pointer near the top of the screen, presumably to abandon the page. The popover usually contains an offer at a discounted price, though you can customize the popover to contain any offer.

To add this popover to your presentation, add the AbandonmentPopoverV3 component as a child to the Page V3 component. Follow the step-by-step guide below for more instructions.

Step-by-step guide

Arrange the components:

1. From the CMS, select the hierarchy button and choose a level (Client, Newspaper Group, or Newspaper).

2. Select Subscription Panel, then choose Presentations.

3. From the drop-down menu, select the Presentation you wish to edit. The Presentation's structure and components will appear below.

4. Using the Component Selector tool, drag the AbandonmentPopoverV3 component into your Presentation and make it a child to any Page V3 component.

5. Select save.

Configure various component properties:

1. Navigate to the AbandonmentPopoverV3 component and select the details button.

2. Toggle Button Show to On.

3. Add the offer id of the offer you wish to sell to the Button OfferGroupId field. This links the button to your offer in circulation.

4. Add text to the title and body properties (e.g. "Get Unlimited Access to Local News");

5. Add text to the Button Text property (e.g. "Get this Offer").

6. Set the MaxWidth(px) property to determine the pixel size of your popover. 1000 pixels is max width.

7. Select save.

Add an idle popover

You can add an idle popover to your Subscription Panel that triggers a reminder (max width: 1000 pixels) when the user's mouse has been idle for a predefined amount of time.

To add this popover to your presentation, add the Idle Popover V3 component as a child to the Page V3 component. Follow the step-by-step guide below for more instructions.

Step-by-step guide

Arrange the components:

1. From the CMS, select the hierarchy button and choose a level (Client, Newspaper Group, or Newspaper).

2. Select Subscription Panel, then choose Presentations.

3. From the drop-down menu, select the Presentation you wish to edit. The Presentation's structure and components will appear below.

4. Using the Component Selector tool, drag the Idle Popover V3 component into your Presentation and make it a child to any Page V3 component.

5. Select save.

Configure various component properties:

1. Navigate to the Idle Popover V3 component and select the details button.

2. Add text to the title and body properties.

3. Add a number of seconds Idle Timeout (sec) property. This number determines how many seconds go by before the popover appears.

4. Add a number to the NumberOfOpenings property. This number determines how many times the idle popover appears before it stops altogether.

5. Select save.

Add a cookie banner to your Presentation

You can add a cookie notice banner popover to your Presentation that notifies users that the site stores third party cookies.

To add the cookie notice popover, you must add the Cookie Notice V3 component as a child to the Page V3 component. Follow the step-by-step guide below for more instructions.

Step-by-step guide

Arrange the components:

1. From the CMS, select the hierarchy button and choose a level (Client, Newspaper Group, or Newspaper).

2. Select Subscription Panel, then choose Presentations.

3. From the drop-down menu, select the Presentation you wish to edit. The Presentation's structure and components will appear below.

4. Using the Component Selector tool, drag the Cookie Notice V3 component into your Presentation and make it a child to any Page V3 component.

5. Select save.

Configure various component properties:

1. Navigate to the Cookie Notice V3 component and select the details button.

2. Enter values for the following property fields: CookieText - The text that appears on the banner, typically explaining that by continuing the user agrees to the cookies. CookieLink - A link typically to your privacy policy. CookieLinkText - The text of your link.

3. (Optionally, enter values for the following property fields: Styling BackgroundColor - a hexadecimal field and color palette for the banner color. If unused, the default color will be used. Styling TextColor - a hexadecimal field and color palette for the text color.)

4. Select save.

Add mobile-specific styling to a Presentation

If you have a Presentation you want to be shown on mobile devices also, you can add specific styling to it.

Step-by-step guide

1. From the CMS, select the Hierarchy button and choose a level (Client, Newspaper Group, or Newspaper).

2. Select Subscription Panel, then choose Presentations.

3. From the drop-down menu, select the Presentation you wish to edit. The Presentation's structure and components will appear below.

4. Navigate to the Page V3 component and select the Details button.

5. Ensure the following properties are configured:

   • MobileTitle - the title of the mobile presentation

   • MobileSubtitle - the subtitle of the mobile presentation

   • AlternativeMobileStyling set to On - enables mobile-specific styling

   • Any other properties with the MobileStyling prefix

6. Select Save.

Redirect mobile devices to a different Presentation

You can redirect mobile devices to different Presentations. This is helpful for ensuring that mobile users have the best Presentation possible.

Before you start

Before you follow the steps below, be sure to create a mobile presentation (please see above).

Step-by-step guide

To redirect mobile devices to a different Presentation:

1. From the CMS, select the Hierarchy button and choose a level (Client, Newspaper Group, or Newspaper).

2. Select Subscription Panel, then choose Presentations.

3. From the drop-down menu, select the Presentation you wish to edit. The Presentation's structure and components will appear below.

4. Navigate to the Presentation Properties component and select the Details button.

5. Ensure the DetectMobileDevices property is set to On.

6. Add the mobile presentation's URL to the MobileRedirectUrl property.

7. Select save.

Add a favicon and meta title to your Presentation

A favicon or website icon is an image associated with your webpage that appears on the tab, bookmark, or URL, etc. The meta title tag is an HTML code tag that tells search engines and web browsers what the title of a web page is.

Before you start

Before you continue to the tutorial steps below, be sure to have created a Page V3 component.

Step-by-step guide

1. From the CMS, select the Hierarchy button and choose a level (Client, Newspaper Group, or Newspaper).

2. Select Subscription Panel, then choose Presentations.

3. From the drop-down menu, select the Presentation you wish to edit. The Presentation's structure and components will appear below.

4. Navigate to the Page V3 component and select the Details button.

5. Ensure the following properties are configured:

   • PageMetaData Title - the page's meta data title

   • PageMetaData Favicon - favicon image

6. Select Save.

Add OG tags to a Presentation

Open Graph Meta Tags (OG tags) control how URLs are displayed when shared on social media. To create an OG tag, you need to configure just a few properties of the Presentation Properties component.

Step-by-step guide

To add OG tags:

1. From the CMS, select the Hierarchy button and choose a level (Client, Newspaper Group, or Newspaper).

2. Select Subscription Panel, then choose Presentations.

3. From the drop-down menu, select the Presentation you wish to edit. The Presentation's structure and components will appear below.

4. Navigate to the Presentation Properties component and select the Details button.

5. Ensure the following properties are configured:

   • OgTags Description - the description that displays when your page is shared.

   • OgTags Image - the image that displays when your page is shared.

   • OgTags SiteName - the website name that displays when your page is shared.

   • OgTags Title - the title that displays when your page is shared.

6. Select Save.

Enable CAPTCHA/ReCAPTCHA for a Presentation

You can enable CAPTCHA and ReCAPTCHA on a Presentation, as well as set a ReCAPTCHA score. ReCAPTCHA element helps you to protect yourself from fraudulent transactions coming in from the Subscription Panel.

Step-by-step guide

To add ReCAPTCHA to a presentation and set the ReCAPTCHA score:

1. From the CMS, select the Hierarchy button and choose a level (Client, Newspaper Group, or Newspaper).

2. Select Subscription Panel, then choose Presentations.

3. From the drop-down menu, select the Presentation you wish to edit. The Presentation's structure and components will appear below.

4. Add Recaptcha V3 component (from Widgets & Alerts category) as a child to the Step V3 component. Typically Recaptcha V3 is added to the 'Place Order' Step V3.

5. Navigate to the Presentation Properties V3 component and select the Details button.

6. Ensure the following properties are configured:

   • TurnOffCaptcha set to Off

   • RecaptchaScore - scores range from 0.0 to 1.0, where 0.0 indicates abusive traffic and 1.0 indicates good traffic. See Google's documentation for more information.

7. Select Save.

Recaptcha V3 is a little different than Invisible Recaptcha. Recaptcha will score every user session with a rating between or equal to 0.0 to 1.0

0.0 = Most likely a bot

1.0 = Most likely human

During the subscription process, that score is returned to Naviga. Depending on the threshold set in your Recaptcha V3 and the score that Recaptcha returns to us, will determine on the expected result.

Examples

If your Recaptcha component is set to a score of 0.3 and the score that Recaptcha returns is 0.7 then the expected result is to allow the user to continue the subscription process because their score was above the threshold.

If your Recaptcha component is set to a score of 0.7 and the score that Recaptcha returns is 0.5 then the expected result is to block the user from continuing the subscription process with the error message “There is an error placing your order. Please contact customer service to make your purchase.” Note, this message is not editable via CMS. Any changes to the message require product development assistance.

An easy rule of thumb to use when setting your score value is:

• The higher the score on the Recaptcha V3, the HARDER it is to pass Recaptcha

• The lower the score on the Recaptcha V3, the EASIER it is to pass Recaptcha

Additionally, Google provides a console, where users can review all requests from the past 7 or 90 days and what they scored them as. This helps in understanding what a typical score is for your userbase and ultimately guide you on how high or low to set your Recaptcha V3 score.

If you would like access, please provide your Naviga Project Manager with a gmail account(s) you want the access to be granted.

Add padding to your Presentation

There are two types of padding:

• Step padding - the space between step components

• Input padding - the space between input fields

This feature allows you to add precision to the look of your Presentation. For the simple theme, by default there are 10px of space between steps and 20px of space between inputs. For the default theme, by default there are 30px of space between steps and 30px of space between inputs.

To change these, follow the guide below.

Step-by-step guide

To edit padding:

1. From the CMS, select the Hierarchy button and choose a level (Client, Newspaper Group, or Newspaper).

2. Select Subscription Panel, then choose Presentations.

3. From the drop-down menu, select the Presentation you wish to edit. The Presentation's structure and components will appear below.

4. Navigate to the Presentation Properties V3 component and select the Details button.

5. Edit/add the InputPadding property to change the input space.

6. Edit/add the StepPadding property to change the step space.

7. Select Save.

Add a newsletter signup option to the confirmation page

You can add a newsletter signup option on the confirmation screen.

Before you start

Before you continue to the steps below, be sure that you have a Confirmation V3 component configured as a child of a Page V3 component.

Step-by-step guide

To add this option:

1. From the CMS, select the Hierarchy button and choose a level (Client, Newspaper Group, or Newspaper).

2. Select Subscription Panel, then choose Presentations.

3. From the drop-down menu, select the Presentation you wish to edit. The Presentation's structure and components will appear below.

4. Navigate to the Confirmation V3 component and select the Details button.

5. Ensure the following properties are configured:

   • NewsletterSignUp Show set to On - enables the Newsletter signup option

   • Newsletter Sign Up Show In The End set to On - shows the option at the end of the subscription confirmation

   • NewsletterSignUp PreferenceIDList - the list of IDs that you wish to sign your user up to

   • NewsletterSignUp ConfirmationMessage - the message the user sees upon signing up

   • NewsletterSignUp Errors Title - the error message a user sees if an error occurs

6. Select Save.

Enable coupon codes in your Presentation

You can enable coupon codes (called multi-use codes in Solicitor) field. This allows a user to use a coupon code to access a particular offer. This feature is available on any landing type. To add this feature, you must configure properties on either the Promotion Digital V3 or Promotion Zipcode V3 components.

Before you start

Before you continue to the tutorial steps below, make sure you have completed the following tasks:

• configured multi-use codes in Solicitor Concierge

• Added either the Promotion Digital V3 or Promotion Zipcode V3 components as children to the Landing - Tiles V3 component

Step-by-step guide

To add the coupon code option:

1. From the CMS, select the Hierarchy button and choose a level (Client, Newspaper Group, or Newspaper).

2. Select Subscription Panel, then choose Presentations.

3. From the drop-down menu, select the Presentation you wish to edit. The Presentation's structure and components will appear below.

4. Navigate to either the Promotion Digital V3 or Promotion Zipcode V3 components and select the Details button.

5. Ensure the following properties are configured:

   • Action Coupon Show set to On - enables the coupon code field

   • Action Coupon ShowText - e.g. "I have a coupon"

   • Action Coupon HideText - e.g. "Hide coupon"

   • Action Coupon Placeholder - the default text that appears in the coupon code field (e.g. "coupon code")

   • Action Coupon Validation Required Message - the message that appears when the coupon is validated

6. Select Save

Add Google's Address Autocomplete

You can add Google's Address Autocomplete feature to your Presentation. The Address Autocomplete feature displays address recommendations when user's begin to fill out address information fields.

Before you start

Before you continue to the tutorial steps below, be sure to complete the following tasks:

• Enable Google's Places API, get an API key, then provide that key to a Naviga implementation manager.

• Review Google's pricing sheet.

• Add the Billing Information V3 and Delivery Information V3 components as children to the Step V3 component.

Step-by-step guide

To add the Address Autocomplete feature:

1. From the CMS, select the Hierarchy button and choose a level (Client, Newspaper Group, or Newspaper).

2. Select Subscription Panel, then choose Presentations.

3. From the drop-down menu, select the Presentation you wish to edit. The Presentation's structure and components will appear below.

4. Navigate to the Delivery Information component and select the Details button.

5. Ensure the following properties are configured:

   • AddressLine AutoComplete Apply set to On - enables the address autocomplete feature

   • AddressLine AutoComplete ApplyGeoLocation set to On - enables geolocation suggestions

6. Select Save.

7. Repeat steps 1-6 for the Billing Information component.

Enable one-time use codes for a Presentation

You can enable one-time use codes field on your Presentation that allows users to bring up a particular offer.

Before you start

Before you continue to the tutorial steps below, be sure you have completed the following prerequisite steps:

• Configured one-time use codes in Solicitor.

• Created a Step V3 component and made it a child of a Page V3 component.

Step-by-step guide

To enable one-time use codes:

1. From the CMS, select the Hierarchy button and choose a level (Client, Newspaper Group, or Newspaper).

2. Select Subscription Panel, then choose Presentations.

3. From the drop-down menu, select the Presentation you wish to edit. The Presentation's structure and components appear below.

4. Add or create the component OneTimeUse Codes V3. Make this component a child of your Step V3 component.

5. Select Save.

Create an international Presentation

You can create international Presentations that support non-US countries.

Before you start

Before you continue to the following tutorial steps, be sure you have completed the following prerequisites:

• Create a Presentation Properties component.

• Create a Delivery Information V3 component and make it a child of a Step V3 component.

• Create a Billing Information V3 component and make it a child of a Step V3 component.

Step-by-step guide

To enable international functionality:

1. From the CMS, select the Hierarchy button and choose a level (Client, Newspaper Group, or Newspaper).

2. Select Subscription Panel, then choose Presentations.

3. From the drop-down menu, select the Presentation you wish to edit. The Presentation's structure and components appear below.

4. Navigate to the Presentation Properties component, select the Edit button, then ensure the International property is set to On.

5. Select Save.

To enable international address lines:

1. From the CMS, select the Hierarchy button and choose a level (Client, Newspaper Group, or Newspaper).

2. Select Subscription Panel, then choose Presentations.

3. From the drop-down menu, select the Presentation you wish to edit. The Presentation's structure and components appear below.

4. Navigate to the Delivery Information V3 component, select the Edit button, then ensure the following properties are configured:

   • PostalCode Show is set to On - enables the international postal codes

   • PostalCode Title - title for the international postal code field

   • Country Show is set to On - enables non-US countries

   • AddressLine Show is set to On, and other properties with the AddressLine prefix configured

   • SecondAddressLine Show is set to On, and other properties with SecondAddressLine prefix configured

   • InternationalCity Show set to On - enables the international city field

   • Province Show set to On - enables the international province field

   • InternationalPhone Show set to On - enables the international phone number field

   • City Show set to On - enables US cities.

   • State Show set to On - enables US states.

   • Zipcode Show set to On - enables US postal codes.

5. Complete step 4 for the Billing Information V3 component.

6. Select Save.

Create a No-landing Presentation

You can create a No-landing Presentation.

Step-by-step Guide

1. From the CMS, select the Hierarchy button and choose a level (Client, Newspaper Group, or Newspaper).

2. Select Subscription Panel, then choose Presentations.

3. From the drop-down menu, select the Presentation you wish to edit. The Presentation's structure and components appear below.

4. Search for the Landing component and select the Delete button. If this component doesn't exist, continue to the next step.

5. Navigate to the Presentation Properties component and select the Details button. The component's details expand below.

6. Add the Offer Group ID of the offer you wish to associate this Presentation with to the DefaultOfferGroupID property.

7. Select Save.

Change Subscription Panel's theme

You can switch Subscription Panel's theme and select between Default, Simple or Seamless themes. They are depicted below.

Step-by-step guide

1. From the CMS, select the Hierarchy button and choose a level (Client, Newspaper Group, or Newspaper).

2. Select Subscription Panel, then choose Presentations.

3. From the drop-down menu, select the Presentation you wish to edit. The Presentation's structure and components appear below.

4. Navigate to the Presentation Properties component and select the Details button. The component's properties expand below. Ensure the following property is configured: Theme - choose either Simple or Default

5. Navigate to the Page V3 component and select the Details button. The component's properties expand below. Ensure the following property is configured: Page Type - choose either accordion, expanded accordion, one, full page, or progressive. Note: examples are in the Overview section above.

6. Select Save.