Tutorials and Step-by-step guides
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:
From the CMS, select the hierarchy button and choose a level (
Client
,Newspaper Group
, orNewspaper
).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 promotionBody
- 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:
From the CMS, select the hierarchy button and choose a level (
Client
,Newspaper Group
, orNewspaper
).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 theConfirmation 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, enterwww.twitter.com
for the link and selectTwitter
from thetype
drop-down menu.(Optionally, configure the
SocialMedia Header
[e.g. "Follow us on"].)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:
From the CMS, select the hierarchy button and choose a level (
Client
,Newspaper Group
, orNewspaper
).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 theConfirmation 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 yourApp Downloads V3
components.Select the Details button to expand the component's properties.
Toggle
AppDownloads.Show
toON
.(Optionally, configure the
AppDownloads Header
[e.g. "Download our apps].)Select save.
Other non-mandatory properties:
AppDownloads.Subtitle
- Subtitle to the headerAppDownloads.Image
- adds a background imageAppDownloads.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:
From the CMS, select the hierarchy button and choose a level (
Client
,Newspaper Group
, orNewspaper
).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 anyStep V3
component.Select save.
Configure various component properties:
Navigate to the
Upsell V3
component and select the details button.Toggle
Offer ShowImage
toOn
.Toggle
Offer MarketingTitle Show
toOn
and add text to theInlineTitle
andOffer MarketingTitle Text
properties.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
.
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:
From the CMS, select the hierarchy button and choose a level (
Client
,Newspaper Group
, orNewspaper
).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 anyConfirmation V3
component.Select save.
Configure various component properties:
Navigate to the
Registration on Confirmation V3
component and select the details button.Toggle
Password Show
toOn
.Toggle
Password Validation Required Apply
toOn
.Add text to the
Title
property (e.g. "Create a password") andButton Text
property (e.g. "Submit").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:
From the CMS, select the hierarchy button and choose a level (
Client
,Newspaper Group
, orNewspaper
).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 anyPage V3
component.Select save.
Configure various component properties:
Navigate to the
AbandonmentPopoverV3
component and select the details button.Toggle
Button Show
toOn
.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
andbody
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.
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:
From the CMS, select the hierarchy button and choose a level (
Client
,Newspaper Group
, orNewspaper
).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 anyPage 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
andbody
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.
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:
From the CMS, select the hierarchy button and choose a level (
Client
,Newspaper Group
, orNewspaper
).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 anyPage 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.
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
From the CMS, select the Hierarchy button and choose a level (
Client
,Newspaper Group
, orNewspaper
).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 presentationMobileSubtitle
- the subtitle of the mobile presentationAlternativeMobileStyling
set toOn
- enables mobile-specific stylingAny other properties with the
MobileStyling
prefix
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:
From the CMS, select the Hierarchy button and choose a level (
Client
,Newspaper Group
, orNewspaper
).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 toOn
.Add the mobile presentation's URL to the
MobileRedirectUrl
property.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
From the CMS, select the Hierarchy button and choose a level (
Client
,Newspaper Group
, orNewspaper
).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 titlePageMetaData Favicon
- favicon image
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:
From the CMS, select the Hierarchy button and choose a level (
Client
,Newspaper Group
, orNewspaper
).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.
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:
From the CMS, select the Hierarchy button and choose a level (
Client
,Newspaper Group
, orNewspaper
).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 toOff
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.
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 RecaptchaThe 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:
From the CMS, select the Hierarchy button and choose a level (
Client
,Newspaper Group
, orNewspaper
).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.
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:
From the CMS, select the Hierarchy button and choose a level (
Client
,Newspaper Group
, orNewspaper
).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 toOn
- enables the Newsletter signup optionNewsletter Sign Up Show In The End
set toOn
- shows the option at the end of the subscription confirmationNewsletterSignUp PreferenceIDList
- the list of IDs that you wish to sign your user up toNewsletterSignUp ConfirmationMessage
- the message the user sees upon signing upNewsletterSignUp 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.
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
orPromotion Zipcode V3
components as children to theLanding - Tiles V3
component
Step-by-step guide
To add the coupon code option:
From the CMS, select the Hierarchy button and choose a level (
Client
,Newspaper Group
, orNewspaper
).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
orPromotion Zipcode V3
components and select the Details button.Ensure the following properties are configured:
Action Coupon Show
set toOn
- enables the coupon code fieldAction 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
.
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
andDelivery Information V3
components as children to theStep V3
component.
Step-by-step guide
To add the Address Autocomplete feature:
From the CMS, select the Hierarchy button and choose a level (
Client
,Newspaper Group
, orNewspaper
).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 toOn
- enables the address autocomplete featureAddressLine AutoComplete ApplyGeoLocation
set toOn
- enables geolocation suggestions
Select Save.
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 aPage V3
component.
Step-by-step guide
To enable one-time use codes:
From the CMS, select the Hierarchy button and choose a level (
Client
,Newspaper Group
, orNewspaper
).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 yourStep 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
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 aStep V3
component.Create a
Billing Information V3
component and make it a child of aStep V3
component.
Step-by-step guide
To enable international functionality:
From the CMS, select the Hierarchy button and choose a level (
Client
,Newspaper Group
, orNewspaper
).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 theInternational
property is set toOn
.Select Save.
To enable international address lines:
From the CMS, select the Hierarchy button and choose a level (
Client
,Newspaper Group
, orNewspaper
).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 toOn
- enables the international postal codesPostalCode Title
- title for the international postal code fieldCountry Show
is set toOn
- enables non-US countriesAddressLine Show
is set toOn
, and other properties with theAddressLine
prefix configuredSecondAddressLine Show
is set toOn
, and other properties withSecondAddressLine
prefix configuredInternationalCity Show
set toOn
- enables the international city fieldProvince Show
set toOn
- enables the international province fieldInternationalPhone Show
set toOn
- enables the international phone number fieldCity Show
set toOn
- enables US cities.State Show
set toOn
- enables US states.Zipcode Show
set toOn
- enables US postal codes.
Complete step 4 for the
Billing Information V3
component.Select Save.
Create a No-landing Presentation
You can create a No-landing Presentation.
Step-by-step Guide
From the CMS, select the Hierarchy button and choose a level (
Client
,Newspaper Group
, orNewspaper
).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.
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
From the CMS, select the Hierarchy button and choose a level (
Client
,Newspaper Group
, orNewspaper
).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 eitherSimple
orDefault
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 eitheraccordion
,expanded accordion
,one
,full page
, orprogressive
. Note: examples are in the Overview section above.Select Save.
Last updated
Was this helpful?