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.
Arrange the components:
From the CMS, select the hierarchy button and choose a level (Client, Newspaper Group, or Newspaper).
Select Subscription Panel, then choose Presentations.
From the drop-down menu, select the Presentation you wish to add a landing. The Presentation's structure and components will appear below.
Add or drag your desired landing component into the Presentation and make it a child to the Page V3 component.
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).
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 follow the steps below, be sure that the Confirmation V3 component is a child of the Page V3 component.
Arrange the components:
From the CMS, select the hierarchy button and choose a level (Client, Newspaper Group, or Newspaper).
Select Subscription Panel, then choose Presentations.
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.
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.
Select save.
Configure various component properties:
Navigate to the social media components.
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.
(Optionally, configure the SocialMedia Header [e.g. "Follow us on"].)
Select save.
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 follow the steps below, be sure that the Confirmation V3 component is a child of the Page V3 component.
Arrange the components:
From the CMS, select the hierarchy button and choose a level (Client, Newspaper Group, or Newspaper).
Select Subscription Panel, then choose Presentations.
From the drop-down menu, select the Presentation you wish adding download buttons to. The Presentation's structure and components will appear below.
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.
Select the Details button next to each component, and add the corresponding AppDownloads Link (e.g. www.google.com).
Select save next to each component to save your work.
Configure various component properties:
Navigate to the Confirmation V3 component that is the parent to your App Downloads V3 components.
Select the Details button to expand the component's properties.
Toggle AppDownloads.Show to ON.
(Optionally, configure the AppDownloads Header [e.g. "Download our apps].)
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
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 continue to the tutorial steps below, be sure you have configured your Upsell Offer in Solicitor Concierge.
Arrange the components:
From the CMS, select the hierarchy button and choose a level (Client, Newspaper Group, or Newspaper).
Select Subscription Panel, then choose Presentations.
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.
Drag the Upsell V3 component into your Presentation and make it a child to any Step V3 component.
Select save.
Configure various component properties:
Navigate to the Upsell V3 component and select the details button.
Toggle Offer ShowImage to On.
Toggle Offer MarketingTitle Show to On and add text to the InlineTitle and Offer MarketingTitle Textproperties.
Select save.
These are the recommended properties to make your component functional. Fill in the other properties to add more customization. If you'd prefer your Upsell to appear as a modal, toggle the showinModal to On.
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.
Arrange the components:
From the CMS, select the hierarchy button and choose a level (Client, Newspaper Group, or Newspaper).
Select Subscription Panel, then choose Presentations.
From the drop-down menu, select the Presentation you wish to edit. The Presentation's structure and components will appear below.
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.
Select save.
Configure various component properties:
Navigate to the Registration on Confirmation V3 component and select the details button.
Toggle Password Show to On.
Toggle Password Validation Required Apply to On.
Add text to the Title property (e.g. "Create a password") and Button Text property (e.g. "Submit").
Select save.
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.
Arrange the components:
From the CMS, select the hierarchy button and choose a level (Client, Newspaper Group, or Newspaper).
Select Subscription Panel, then choose Presentations.
From the drop-down menu, select the Presentation you wish to edit. The Presentation's structure and components will appear below.
Using the Component Selector tool, drag the AbandonmentPopoverV3 component into your Presentation and make it a child to any Page V3 component.
Select save.
Configure various component properties:
Navigate to the AbandonmentPopoverV3 component and select the details button.
Toggle Button Show to On.
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.
Add text to the title and body properties (e.g. "Get Unlimited Access to Local News");
Add text to the Button Text property (e.g. "Get this Offer").
Set the MaxWidth(px) property to determine the pixel size of your popover. 1000 pixels is max width.
Select save.
These are the recommended properties we suggest to get going for a functional abandonment popover. Optionally, configure the BackgroundColor,BackgroundImage, or other properties.
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.
Arrange the components:
From the CMS, select the hierarchy button and choose a level (Client, Newspaper Group, or Newspaper).
Select Subscription Panel, then choose Presentations.
From the drop-down menu, select the Presentation you wish to edit. The Presentation's structure and components will appear below.
Using the Component Selector tool, drag the Idle Popover V3 component into your Presentation and make it a child to any Page V3 component.
Select save.
Configure various component properties:
Navigate to the Idle Popover V3 component and select the details button.
Add text to the title and body properties.
Add a number of seconds Idle Timeout (sec) property. This number determines how many seconds go by before the popover appears.
Add a number to the NumberOfOpenings property. This number determines how many times the idle popover appears before it stops altogether.
Select save.
These are the recommended properties we suggest to get going for a functional idle popover. Optionally, configure the BackgroundColor,BackgroundImage, BorderColor, and BorderWidth properties.
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.
Arrange the components:
From the CMS, select the hierarchy button and choose a level (Client, Newspaper Group, or Newspaper).
Select Subscription Panel, then choose Presentations.
From the drop-down menu, select the Presentation you wish to edit. The Presentation's structure and components will appear below.
Using the Component Selector tool, drag the Cookie Notice V3 component into your Presentation and make it a child to any Page V3 component.
Select save.
Configure various component properties:
Navigate to the Cookie Notice V3 component and select the details button.
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.
(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.)
Select save.
When a user visits the page, the page will check to see if Subscribe's internal cookie with a value of TRUE already exists. If it does, nothing will happen. If it does not, a cookie banner will display. When the user closes the banner, a cookie will be set with a value of TRUE and an expiration date of 120 days.
If you have a Presentation you want to be shown on mobile devices also, you can add specific styling to it.
From the CMS, select the Hierarchy button and choose a level (Client, Newspaper Group, or Newspaper).
Select Subscription Panel, then choose Presentations.
From the drop-down menu, select the Presentation you wish to edit. The Presentation's structure and components will appear below.
Navigate to the Page V3 component and select the Details button.
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
Select Save.
You can redirect mobile devices to different Presentations. This is helpful for ensuring that mobile users have the best Presentation possible.
Before you follow the steps below, be sure to create a mobile presentation (please see above).
To redirect mobile devices to a different Presentation:
From the CMS, select the Hierarchy button and choose a level (Client, Newspaper Group, or Newspaper).
Select Subscription Panel, then choose Presentations.
From the drop-down menu, select the Presentation you wish to edit. The Presentation's structure and components will appear below.
Navigate to the Presentation Properties component and select the Details button.
Ensure the DetectMobileDevices property is set to On.
Add the mobile presentation's URL to the MobileRedirectUrl property.
Select save.
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 continue to the tutorial steps below, be sure to have created a Page V3 component.
From the CMS, select the Hierarchy button and choose a level (Client, Newspaper Group, or Newspaper).
Select Subscription Panel, then choose Presentations.
From the drop-down menu, select the Presentation you wish to edit. The Presentation's structure and components will appear below.
Navigate to the Page V3 component and select the Details button.
Ensure the following properties are configured:
PageMetaData Title - the page's meta data title
PageMetaData Favicon - favicon image
Select Save.
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.
To add OG tags:
From the CMS, select the Hierarchy button and choose a level (Client, Newspaper Group, or Newspaper).
Select Subscription Panel, then choose Presentations.
From the drop-down menu, select the Presentation you wish to edit. The Presentation's structure and components will appear below.
Navigate to the Presentation Properties component and select the Details button.
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.
Select Save.
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.
To add ReCAPTCHA to a presentation and set the ReCAPTCHA score:
From the CMS, select the Hierarchy button and choose a level (Client, Newspaper Group, or Newspaper).
Select Subscription Panel, then choose Presentations.
From the drop-down menu, select the Presentation you wish to edit. The Presentation's structure and components will appear below.
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.
Navigate to the Presentation Properties V3 component and select the Details button.
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.
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.
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.
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.
To edit padding:
From the CMS, select the Hierarchy button and choose a level (Client, Newspaper Group, or Newspaper).
Select Subscription Panel, then choose Presentations.
From the drop-down menu, select the Presentation you wish to edit. The Presentation's structure and components will appear below.
Navigate to the Presentation Properties V3 component and select the Details button.
Edit/add the InputPadding property to change the input space.
Edit/add the StepPadding property to change the step space.
Select Save.
You can add a newsletter signup option on the confirmation screen.
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.
To add this option:
From the CMS, select the Hierarchy button and choose a level (Client, Newspaper Group, or Newspaper).
Select Subscription Panel, then choose Presentations.
From the drop-down menu, select the Presentation you wish to edit. The Presentation's structure and components will appear below.
Navigate to the Confirmation V3 component and select the Details button.
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
Select Save.
The above list details the recommended or mandatory. Any property with the NewsletterSignUp prefix is related to this feature.
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 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
To add the coupon code option:
From the CMS, select the Hierarchy button and choose a level (Client, Newspaper Group, or Newspaper).
Select Subscription Panel, then choose Presentations.
From the drop-down menu, select the Presentation you wish to edit. The Presentation's structure and components will appear below.
Navigate to either the Promotion Digital V3 or Promotion Zipcode V3 components and select the Details button.
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
Select Save
The above list details the recommended or mandatory. Any property with the Action Coupon prefix is related to this feature.
To view the coupon in a modal window, toggle ActionsinModal to On.
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 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.
To add the Address Autocomplete feature:
From the CMS, select the Hierarchy button and choose a level (Client, Newspaper Group, or Newspaper).
Select Subscription Panel, then choose Presentations.
From the drop-down menu, select the Presentation you wish to edit. The Presentation's structure and components will appear below.
Navigate to the Delivery Information component and select the Details button.
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
Select Save.
Repeat steps 1-6 for the Billing Information component.
You can enable one-time use codes field on your Presentation that allows users to bring up a particular offer.
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.
To enable one-time use codes:
From the CMS, select the Hierarchy button and choose a level (Client, Newspaper Group, or Newspaper).
Select Subscription Panel, then choose Presentations.
From the drop-down menu, select the Presentation you wish to edit. The Presentation's structure and components appear below.
Add or create the component OneTimeUse Codes V3. Make this component a child of your Step V3 component.
Select Save.
The properties for the OneTimeUse Codes V3 component are optional. Some common ones are: - ShowButtonText - the default text for the coupon code field (e.g. "enter code here") - Properties with the Button Styling prefix - properties that change the styling - SuccessMessage - the displayed message when a code is used successfully
You can create international Presentations that support non-US countries.
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.
To enable international functionality:
From the CMS, select the Hierarchy button and choose a level (Client, Newspaper Group, or Newspaper).
Select Subscription Panel, then choose Presentations.
From the drop-down menu, select the Presentation you wish to edit. The Presentation's structure and components appear below.
Navigate to the Presentation Properties component, select the Edit button, then ensure the International property is set to On.
Select Save.
To enable international address lines:
From the CMS, select the Hierarchy button and choose a level (Client, Newspaper Group, or Newspaper).
Select Subscription Panel, then choose Presentations.
From the drop-down menu, select the Presentation you wish to edit. The Presentation's structure and components appear below.
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.
Complete step 4 for the Billing Information V3 component.
Select Save.
You can create a No-landing Presentation.
From the CMS, select the Hierarchy button and choose a level (Client, Newspaper Group, or Newspaper).
Select Subscription Panel, then choose Presentations.
From the drop-down menu, select the Presentation you wish to edit. The Presentation's structure and components appear below.
Search for the Landing component and select the Delete button. If this component doesn't exist, continue to the next step.
Navigate to the Presentation Properties component and select the Details button. The component's details expand below.
Add the Offer Group ID of the offer you wish to associate this Presentation with to the DefaultOfferGroupID property.
Select Save.
You can switch Subscription Panel's theme and select between Default, Simple or Seamless themes. They are depicted below.
From the CMS, select the Hierarchy button and choose a level (Client, Newspaper Group, or Newspaper).
Select Subscription Panel, then choose Presentations.
From the drop-down menu, select the Presentation you wish to edit. The Presentation's structure and components appear below.
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
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.
Select Save.
