Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Each component must have at least one property, but typically a component has many properties.
Though it is possible to create properties, and there are instructions to do so below, we highly recommend that you don't. Naviga is happy to create them for you, and usually does with a script. This ensures they function properly.
To add a property to a component:
From the CMS, select the Hierarchy button and chose the Client
level. Properties can only be created at this level.
Select the component manager button.
Search for the component that you wish to add a property to and select edit. (Optionally, select + add new to create a new component.)
Select + add new property. The property creation screen appears.
Fill in the property's information.
Select save in the property's edit column.
To edit a component's properties:
From the CMS, select the Hierarchy button and choose the Client
level. Properties can only be edited at this level.
Select the component manager button.
Search for the component that you wish to edit.
Select the edit button corresponding with your desired component. The property manager will display below.
Navigate to the desired property and perform your desired edits.
Select either save or save as new.
To remove a property from a component:
Select the component manager button from the CMS.
Search for the component that you wish to remove a property from.
Select the edit button corresponding with your desired component. The property manager will display below.
Find the desired property you wish to remove from the list and select delete.
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
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
There are three levels in the CMS Hierarchy:
Client
Newspaper Group
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.
We suggest organizing the hierarchy by configuring widely used settings at the Client level, then overriding them at lower levels when necessary. In some cases overriding is the best way to manage settings (e.g. overriding Attribute for different Newspapers) and doing so will save you headaches in the future.
You can navigate between the hierarchical levels. To do so:
Select the hierarchy button. (The button will display the current level’s name.) After selecting the button, the CMS Hierarchy screen will appear.
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.
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.
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.
You must set the panel’s URL for this feature to use this feature. From the CMS, select Admin -> CMS Settings and fill in the PanelClearCacheUrl1 field with your panel’s URL. The URL must not contain an SSL certificate (i.e. use HTTP, and do not use HTTPS). Example: http://checkout-demo.subscriberconcierge.com/cache/refresh
If your cache was successfully cleared, a success banner appears at the bottom of the screen.
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
Typically, Naviga developers create your components with an SQL script. This ensures that your components are correctly named and ordered. A component's class and code, for instance, must adhere to a predefined naming convention for them to function properly. So though you can create components manually, it is not recommended.
The image below depicts the Component Manager UI.
If you select the + add new button to create a new component, the following screen appears.
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.
Typically, Naviga developers create your Presentation Template. This ensures that it is created to spec. However, you can create Presentation Template manually.
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.
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.
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.
When either saving as new or duplicating components, you should rename them so as to avoid adding copy1, copy2, and so on as extensions.
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
You can only edit Presentation Templates at the Client
hierarchical level.
Though it is possible to create Presentation Templates, and there are instructions to do so below, we highly recommend that you don't. Naviga is happy to create them for you, and usually does with a script. This ensures they function properly.
From the CMS, select the hierarchy button and choose the Client
level.
Select Subscription Panel, then choose Structure Admin.
Select + add new template. The template creation screen appears.
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.
From the CMS, select the hierarchy button and choose the Client
level.
Select Subscription Panel, then choose Structure Admin.
Select an existing Presentation Template from the selected drop-down menu.
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.
From the CMS, select the hierarchy button and choose the Client
level.
Select Subscription Panel, then choose Structure Admin.
Select an existing Presentation Template from the selected drop-down menu.
Select the duplicate button. The duplicated Presentation Template will appear in the drop-down menu. Select it to change its name.
From the CMS, select the hierarchy button and choose the Client
level.
Select Subscription Panel, then choose Structure Admin.
Select an existing Presentation Template from the selected drop-down menu.
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.
You can preview a Presentation at any time with the preview button.
From the CMS, select the hierarchy button and choose an option from the Newspaper
level.
Select Subscription Panel, then choose Presentations.
Select the desired Presentation you wish to preview from the selected drop-down menu. Greyed Presentations are inactive.
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.
DISCLAIMER
Product Information contained within this document, including technical information and functional specifications, is subject to change without notice. Naviga reserves the right to make any changes to the information in this document at any time without notice. Naviga makes no warranty, representation, or guarantee regarding the suitability of its products and services for any particular purpose.
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.
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
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:
At the end of the section you will find detailed Tutorials and step-by step guides and Reference documentation.
You can either create a new presentation or import a presentation from a JSON file.
To import a Presentation:
From the CMS, select the hierarchy button and choose a hierarchical level (Client
, Newspaper Group
, or Newspaper
).
Select Subscription Panel, then choose Presentations.
Select the options drop-down and choose import.
Select a file then select import.
If successful, your new presentation should appear under the presentations drop-down menu.
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:
Presentation Properties
Header
Page
Step
Confirmation
Order Summary
To create a new Presentation:
From the CMS, select the hierarchy button and choose a hierarchical level (Client
, Newspaper Group
, or Newspaper
).
Select Subscription Panel, then choose Presentations.
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.
Based on your selection, continue to the corresponding section below for further steps.
Blank Presentations:
Add a presentation URL, presentation name, and presentation type to your new presentation.
Choose whether you want the presentation to be a default presentation and whether its status is active/inactive.
Use the component selector sidebar to add your components.
Select save.
Save Section as new:
Change the presentation's name and URL to something unique.
(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).
Select save to finish.
Duplicate section:
Change the Presentation's name and URL so that they are unique, then select ok.
(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.)
Select save to finish.
You can edit and delete Presentations.
From the CMS, select the hierarchy button and choose a hierarchical level (Client
, Newspaper Group
, or Newspaper
).
Select Subscription Panel, then choose Presentations.
Select the desired Presentation you wish to edit from the selected drop-down menu. Greyed Presentations are inactive.
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.
Select save once finished.
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.
When you delete a Presentation you are not deleting components. They will still be available in the Component Manager section.
From the CMS, select the hierarchy button and choose the Client
hierarchical level.
Select Subscription Panel, then choose Presentations.
Select the desired Presentation you wish to delete from the selected drop-down menu. Greyed Presentations are inactive.
Select delete. Confirm this is the correct Presentation and select Yes.
You can export Presentations as either a JSON or HTML file.
From the CMS, select the hierarchy button and choose a level (Client
, Newspaper Group
, or Newspaper
).
Select Subscription Panel, then choose Presentations.
Select the options drop-down, then choose export.
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.
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.
From the CMS, select the hierarchy button and choose a level (Client
, Newspaper Group
, or Newspaper
).
Select Subscription Panel, then choose Presentations.
Select the Presentation you wish to export from the selected drop-down menu.
Select the options drop-down, then choose Business export. The download dialogue will appear.
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.
Address Components are related to billing and address information.
Core Structure components shape the basic layout and structure of presentations.
Landings and Promotions Components organize your landing page and any promotions that you are currently running.
Offer Components are used to design and describe offers.
Optional UI components add various UI elements.
Payment Components authorize various payment methods for purchases.
User Data components are designed to collect user data.
Widget Components make presentations interactive with various popovers, notifications, etc.
The intent of the matrix is to provide a comprehensive definition for supported components that you can reference for specific questions. We suggest using task-based tutorials to help with particular tasks.
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:
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 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.
Card abandonments analytics are collected in two ways. For Naviga Discover clients, they are tracked and recorded by Naviga. For non-Naviga Discover clients, they are tracked with Google Analytics.
Component
Description
Possible Parent Components
Possible Child Components
OfferDetails
Displays the details of the selected offer. Typically, either stick or OfferDetails is used.
Step
N/A
OfferSelector
Displays offers horizontally.
Page, Landing
ApplePayEdgil
OfferSelectorTiles
Displays offers as tiles.
Page
N/A
OfferSelectorSmallTiles
Displays offers as small tiles (so that less text is shown).
Page
N/A
OfferSelectorDropDown
Displays offers as a drop-down menu.
Page
N/A
OfferSelectorApplePay
Displays an Apple Pay button for offers.
Page
N/A
OfferSelectorCSR
Displays offers in a table. This is used only in the CSR portal.
Page
N/A
Upsell
Displays an upsell offer. The user's postal code and the initial offer the user selected determines whether the upsell displays.
Step
N/A
Component
Description
Possible Parent Components
Possible Child Components
AbandonmentPopover
Displays a popover when attempting to leave the page.
Page
N/A
AppDownloads
Adds links to the third part app logos that are supported (Google Play, Apple Play).
Any container component.
N/A
Checkbox
Displays an element that asks for a postal code for offers that support printed newspapers.
Checkbox Input
Step
Page
CheckboxVT
Allows for special Vermont postal codes.
Step
Page
N/A
GiftDetails
Allows the user to select an offer that was triggered with a gift code.
Step
Page
N/A
IndependentAddress
Displays an element that allows a user to specify their billing address. Note: This has no relationship to Solicitor Concierge settings.
Any container component.
N/A
Information
Displays a field that can be used to add additional information that does not belong to a specific element.
Any container component.
N/A
Link
Displays a link that redirects the user to a different page.
Any container component.
N/A
NewsletterBenefit
Displays a title for the newsletter options. Must be a child of the confirmation component.
Confirmation
NewsletterOption
NewsletterOption
Displays an element that is designed to retrieve email preferences.
NewsletterBenefit
N/A
OneTimeUseCodes
Displays an input that accepts one-time use codes and displays their offers.
Step
N/A
Perk
Displays the item
from the benefits list.
Any container component.
N/A
SlideShow
Displays the slideshow configuration in CMS.
Any container component.
Slide
Slide
A single slideshow item.
SlideShow
N/A
SocialMedia
Displays various social media icons.
Confirmation
N/A
StepIndicator
Displays what step a user is on and which steps remain.
Page
N/A
StickyNote
Displays further details of an offer in a sticky note to the right of the screen.
Page
N/A
Component
Description
Possible Parent Components
Possible Child
Components
PaymentMethods
A container for supported payment methods.
Step
PayPal, PayPalExpress CreditCard CreditCardEdgil CreditCardVindicia CreditCardChase CreditCardCyberSource CreditCardStripe CreditCardBrainTree CreditCardHOH CreditCardAuthorizeNet CreditCardSpreedly BillMe BankAccountChase BankAccount PayPalDTI
EZPay
Allows users to pay with EZPay.
Step
N/A
BillMe
Allows users to request an invoice.
PaymentMethods
N/A
BankAccount
Allows users to pay with their bank account. Displays a set of fields that allow users to ender bank account data.
PaymentMethods
N/A
BankAccountChase
Displays an iFrame that is used to fill in bank account data. Note: this is rarely used.
PaymentMethods
N/A
CreditCard
Allows users to pay with a credit card.
PaymentMethods
N/A
CreditCardBrainTree
Allows users to pay with a Brain Tree credit card.
PaymentMethods
N/A
CreditCardChase
Allows users to pay with a Chase credit card.
PaymentMethods
N/A
CreditCardCyberSource
Allows users to pay with a Cyber Source credit card.
PaymentMethods
N/A
CreditCardEdgil
Allows users to pay with an Edgil credit card.
PaymentMethods
N/A
CreditCardHOH
Allows users to pay with an HOH credit card.
PaymentMethods
N/A
CreditCardStripe
Allows users to pay with a Stripe credit card.
PaymentMethods
N/A
CreditCardVindicia
Allows users to pay with a vindicia credit card.
PaymentMethods
N/A
PayPal
Allows users to pay with PayPal.
PaymentMethods
N/A
PayPalDTI
Displays a button that opens the PayPal modal window.
PaymentMethods
N/A
PayPalExpress
Allows users to pay with PayPal Express
PaymentMethods
N/A
TermsAndConditions
Displays terms and conditions that a user has to accept to proceed.
Any container component.
N/A
Components
Description
Possible Parent
Components
Possible Child
Components
CollegeInformation
Diplays various fields that allow a user to enter college information
Step
N/A
EmailPreferences
Subscribes users to the various links specified in this component.
Step
N/A
GiftRecipient
???
Step
N/A
InputGiftCode
Displays an input that allows users to enter a code to receive a gift.
Step
N/A
Input
Displays a text field that allows a user to enter text information.
Step
N/A
MilitaryInformation
Displays a set of fields that allow users to enter any military related information.
Step
N/A
UserInformationNoAccount
Displays a field that allows users to enter an email address without creating an account.
Step
N/A
RegistrationOnConfirmation
Displays a set of fields that allow a user to create a registration after purchasing a subscription.
Confirmation
N/A
UserInformation
Displays a set of fields that allow a user to enter genral user information (e.g., DOB, names, etc).
Step
N/A
Component
Description
Possible Parent Components
Possible Child Components
Chat
Displays a chat icon in the bottom corner of the window.
Any container component.
N/A
CookieNotice
Displays a notice explaining cookie data collection.
Presentation
N/A
IdlePopover
Displays a popover after the user has been idle for a determined amount of time.
Page
N/A
IdleTimer
Displays a popover that indicates how much session time is left. Allows the user to continue or leave the page.
Page
N/A
Messaging
??
??
??
NotificationGeographic
Displays a notification if the entered delivery address is undeliverable.
Page
N/A
Captcha
Displays a captcha in the bottom corner.
Any container component.
N/A
RSSFeed
Displays an RSS feed button.
Confirmation
N/A
ScheduledStart
Displays a calendar to specify a subscription's start date.
Step
N/A
Component
Description
Possible Parent Components
Possible Child Components
Billing Information
Displays billing address information
Step
N/A
Delivery Information
Displays delivery address information.
Step
N/A
Component
Description
Possible Parent Components
Possible Child Components
Confirmation
A container for any details confirming a purchase.
Page
RSSFeed SocialMedia NewsLetterBenefit AppDownloads RegistrationOnConfirmation
Header
A container that displays a header. Can be configured as either top-level or as a child, depending on need.
Presentation
Page
N/A
HeaderExtended
Extends the header section.
Presentation
Page
N/A
HeaderGUP
Client specific header, for GUP clients only.
Presentation
Page
N/A
Footer
A container that displays a footer. Can be configured as either top -level or as the child of a page. Can contain useful links, contacts, or an HTML field.
Presentation
Page
N/A
PlaceOrder
A container that displays information regarding an order summary.
Step
N/A
Page
A container for other elements. Typically, there are three Page Components in a presentation.
Presentation
Step LandingTabbed LandingTiles LandingFullScreen LandingAlignedImage LandingZipFirst Landing OfferSelectorTiles OfferSelectorCheckbox OfferSelectorCSR OfferSelector OfferSelectorApplePay OfferSelectorDropdown OfferSelectorSmallTiles AbandonmentPopover IdlePopover GiftDetails Checkbox CheckboxVT Header, HeaderExtended HeaderGUP Footer StepIndicator Confirmation NotificationGeographic
PresentationProperties
Displays global presentation settings (e.g. theme, recaptcha, etc).
Any container component.
N/A
Step
Adds a "step" to the Page Component.
Page
DeliveryInformation BillingInformation Input PaymentMethods EZPay MilitaryInformation CollegeInformation UserInformationNoAccount InputGiftCode CheckboxVT ScheduledStart Checkbox GiftRecipient PlaceOrder ApplePayEdgil GiftDetails EmailPreferences
Component
Description
Possible Parent Components
Possible Child Components
DeliveryDays
Shows the days of the week when a paper is delivered.
Any container component.
N/A
Landing
A container for promotions.
Page
PromotionDigital
PromotionZipcode
PromotionUpsell
PromotionLinkOnly
OfferSelector
LandingAlignedImage
Displays promotions as aligned images.
Page
N/A
LandingFullScreen
Displays promotions as a full screen.
Page
N/A
LandingTabbed
Displays promotions in tabs.
Page
N/A
LandingTiles
Displays promotions in tiles.
Page
N/A
LandingZipFirst
Displays a landing that requires the user to enter a postal code before showing promotions.
Page
N/A
PromotionDigital
Only displays promotions for digital newspapers.
Landing
N/A
PromotionLinkOnly
Displays a promotion with a link that redirects to another presentation
Landing
N/A
PromotionUpsell
Displays an upsell promotion.
Landing
N/A
Promotion Zipcode
Displays a promotion that includes a printed newspaper and requires a postal code.
Landing
N/A
Image
Recommended size/resolution
Note
Header Logo
300x45px
not recommended to use height >300
Page 1 Background Image
popular screen resolutions e.g. 1920x1080px
the image behind any the landing and offer selector (if you use small tiles); can be set to a solid color by inputting a Hex code instead of an image; not recommended to use less than 1600px width
Promotion Tiles
380x250px
Offer Selector Tiles
270x170px or 270x270px or 270x380px
this image is set in Solicitor Concierge, not in CMS. The same image appears both in Offer Selector Tiles and Offer Details
Offer Details
190x120px
this image is set in Solicitor Concierge, not in CMS. The same image appears both in Offer Selector Tiles and Offer Details
Parameter
Description
utm_medium
Google analytics tracking code used to track the marketing medium
utm_source
Google analytics tracking code used to track the source/referrer
utm_campaign
Google analytics tracking code used to track a promotional campaign
utm_content
Google analytics tracking code used to differentiate ads
utm_term
Google analytics tracking code used to identify paid keywords
g2i_source
Naviga's custom tracking code used to track the source/referrer. The tracking information is sent to G2Instights
g2i_medium
Naviga's custom tracking c track the marketing medium.The tracking information is sent to G2Insights
g2i_campaign
Naviga's custom tracking code used to track a promotional campaign. The tracking information is sent to G2Insights
g2i_or_o
In NCS circ this is used to override source code parameter
g2i_or_p
In NCS circ this is used to override sub source parameter
g2i_or_os
In NCS circ this is used to override campaign code parameter
dtmtype
loads adobe script
Parameter
Description
abdCartId
Id of previous session. Subscription Panel gets all data by this ID and auto-populate it
code
user id from BloxCMS user provider. Appended automatically after redirect from external login page
Couponcode
overrides PID in favor of any promotion with that coupon
debugMode
(boolean) sp writes events into browser console
EEproduct
overrides electronic edition product on config
giftCode
value for InputGiftCode component. If code is valid, panel will pass verification automatically
ofrgp_id
pre-selected offer for 3.X version
ofr_id
auto-select offer with the given ID
PID
Legacy PID
siteCode
way to reference a different site code. Only works when CMS paper code & SubCon paper code are the same
onetimeCode
one time code for a specific offer/promotion
Event Name
Description
presentation_loaded_e
Event fires when presentation loaded.
offers_presented_e
Event fires when offers presented.
offer_selected_e
Event fires when user selected offer.
step_activated_e
Event fires when user came to step.
step_completed_e
Event fires when user completed step.
user_came_to_user_info_e
Event fires when user came to billing user information component.
user_info_completed_e
Event fires when user completed user information component.
address_error_e
Event fires when user got error on address component.
payment_error_e
Event fires when user got error on payment component.
user_info_error_e
Event fires when user got error on userInformation component.
user_logged_in
Event fires when user logged in.
user_came_to_billing_address_e
Event fires when user came to billing address component.
billing_address_completed_e
Event fires when user completed billing address component.
user_came_to_delivery_address_e
Event fires when user came to delivery address component.
delivery_address_completed_e
Event fires when user completed delivery address component.
add_subscription_success_e
Event fires when user created subscription.
user_came_to_payment_e
Event fires when user came to payment component.
credit_card_completed_e
Event fires when user completed payment component using credit card component.
bank_account_completed_e
Event fires when user completed payment component using bank account component.
bill_me_completed_e
Event fires when user completed payment component using bill me component.
apple_pay_completed_e
Event fires when user completed apple pay.
swg_completed_e
Event fires when user completed swg.
selected_payment_option_e
Event fires when user selected payment method on payment component.
created_new_user_e
Event fires when user registered as new user.
notification_error_e
Event fires when user got information error on page.
zip_is_not_deliverable_error_e
Event fires when user got error on promotion because zipCode is not deliverable.
no_offers_error_e
Event fires when user got error on promotion because we don’t have any offers.
presentation_failed_e
Event fires when presentation failed.
add_subscription_failed_e
Event fires when user got error when trying create subscription.
page_was_not_found_error_e
Event fires when user came with wrong url parameters.
apple_pay_presented_e
Event fires when offers presented with Apple Pay available.
landing_is_displayed_e
Event fires when landing component is displayed on page.
landing_is_completed_e
Event fires when user completed landing component.
promotion_popup_is_shown_e
Event fires when pop-up box on a landing is shown.
abandon_presented_e
Event fires when abandonment pop-up is shown
abandon_closed_e
Event fires when abandonment pop-up is closed
idle_presented_e
Event fires when idle pop-up is shown
idle_closed_e
Event fires when idle pop-up is closed
upsell_selected_e
Event fires when user selectes upsell offer
upsell_removed_e
Event fires when user deselectes upsell offer
paypal_completed_e
Event fires when user completes paypal payment method.
"paypal" property will be set to true and "paymentOption" property should have value paypal or paypalExpress or paypalDTI
mobile_app_click_e
Event fires when a user clicks on a button that redirects to a mobile application to download.
newsletter_click_e
Event fires when a user clicks on a newsletter option button that does a request to set a subscription.
continue_click_e
Event fires when a user clicks on a continue button on confirmation.
eedition_click_e
Event fires when a user clicks on a button on e-edition section on confirmation.
smart_speaker_click_e
Event fires when a user clicks on a button on smart speaker section on confirmation.
small_external_click_e
Event fires when a user clicks on a button on small external section on confirmation.
social_click_e
Event fires when a user clicks on a link that redirects to a social media.
user_came_to_place_order_e
Event fires when user came to placeOrder component.
place_order_completed_e
Event fires when user completed placeOrder component.
user_came_to_terms_e
Event fires when user came to terms&conditions component.
google_tag_manager_is_not_loaded
Event fires if errors occur during GTM loading
google_analytics_is_not_loaded
Event fires if errors occur during GA loading
promotion_code_presented_e
Event fires if offers are loaded by promotionCode
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:
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:
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 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
.
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.
The guide below outlines the common properties of some common components. Each heading denotes a component and defines that component's properties.
Presentation Properties
Property Name
Description
DefaultZipCode
The postal code the Presentation defaults to.
DefaultOfferGroupId
The Offer Group ID the Presentation defaults to.
Theme
Enables clients to configure paddings, stylings, borders etc. to match the. Some of the Themes
are custom and are designed for a specific clients.
InputPadding
The padding distance for all input fields in a Presentation.
StepPadding
The padding distance for all steps in a Presentation.
Header
Property Name
Description
StylingBackgroundColor
Color of the Header background
StylingBorderColor
Color of the Header border
StylingTextColor
Color of the Header text
BackText
Text of the ‘Back’ navigation button
LoginSectionShow
If the toggle is on then the Login section is shown at the Header, otherwise is hidden
LoginText
Log in control text
LogoutText
Log out control text
LogoUrl
Makes the Logo clickable; click on the Logo redirects the user to the URL specified
LogoAltText
Alternate Logo text shown on hover
StylingBackgroundImage
Image that can be set as the Header background
StylingLogoAlignLeft
If the toggle is on then the Logo is aligned to the left, otherwise is centered
AlreadySubscriber Show
If the toggle is on then the option for subscribers to view the offers is displayed is aligned to the left, otherwise is hidden
AlreadySubscriber Title
The text shown for subscribers in case 'AlreadySubscriber Show' toggle is set to on
AlreadySubscriber LinkText
The text of the link for the subscribers
AlreadySubscriber Url
The URL redirecting subscribers to view the offers
Landing Tiles
Property Name
Description
SubtypeName
Applies additional styling to a way that the Landing Tiles are displayed, i.e. Rounded, NoImage
DisplayInlineCount
Specifies how many promotions should be displayed inline
Title
The text of the title displayed at the top of the landing; formatted text
Subtitle
The text of the subtitle displayed at the top of the landing but beneath the title; formatted text
IncreaseTileOnHover
If the toggle is on then the promotion that is currently on hover will be displayed with bigger size
SliderDotsColor
The color of the navigation controls that allow to navigate within the promotions
Page
Property Name
Description
DisplayType
This property defines how the component should behave when appeared
Title
The Title of the Page; formatted text
Subtitle
The Subtitle of the Page; formatted text
Styling Background Image
The link to the background image for the Psge
Styling Background Color
The color of the Page background
Styling Background Scrollable
If the toggle is on then the background of the Page is scrollable
Styling Background AccentColor
The accent color of the Page background; if specified then the background has two colors - the main one and the accent one
Styling Background AccentImage
The accent background image; if specified then the background has two images - the main one and the accent one
AlternativeMobileStyling
If the toggle is on then the Page will look different on mobile devices. The following properties are mobile specific and are analogous to those for the desktop: MobileTitle, MobileSubtitle, MobileStyling.Background.Image, MobileStyling.Background.Color, MobileStyling.AccentColor, MobileStyling.Background.AccentImage
Offer Selector
Property Name
Description
Offer Button Text
The text of the main Offer button
Show Offer Title?
If the toggle is on then the Title of the Offer is displayed, otherwise is hidden
Show Offer Price?
If the toggle is on then the Price of the Offer is displayed, otherwise is hidden
Show Offer Image?
If the toggle is on then the Offer image is displayed, otherwise is hidden
Show Image On Mobile Devices?
If then toggle is on then the Offer Image is displayed on mobile devices, otherwise is hidden
Title
The Title of the Offer, formatted text
Auto Select Offer
If then toggle is on then the Offer the user clicked on is autoselected, otherwise all the offers are displayed in the same way
Offer Button Position
Indicates whether the button should be aligned to the left, to the right to centered
Show Express Checkout Offer Text?
If then toggle is on then the Title of the Offer is displayed, otherwise is hidden
Show TermsAndConditions?
If then toggle is on then the Title of the Offer is displayed, otherwise is hidden
Show Body
If then toggle is on then the Title of the Offer is displayed, otherwise is hidden
Promotion Digital
and Promotion ZipCode
Property Name
Description
Title
The Title of the Promotion, formatted text
Subtitle
The Subtitle of the Promotion, shown below the Promotion Title, formatted text
Image
The Promotion image
ImageAlt
Alternate image text shown on hover
Body
The Body of the Promotion describing Promotion details shown at the bottom of the Promotion, formatted text
Button OfferGroupId
The Promotion code relevant to the main Promotion button
Button PromotionCode
The Promotion code relevant to the main Promotion button
Button Text
The text of the main Promotion button
RespectURLParams
If the toggle is ON then the flow will go according to the Presentation URL parameters specified, otherwise the URL parameters will be ignored
NoOffersAvailableMessage
Error message displayed in case there are no offers for the zipcode entered
ActionsInModal
If the toggle is ON then the promotions will be displayed in a Modal window so that user's must choose one before continuing
Suppress ZIP Validation Against Default Area?
If the toggle is on then
HideInputs
If the toggle is on then the zipcode input is hidden by default and will be shown only the button is clicked
Step
Property Name
Description
Button Text
The text of the main Step button that redirects to the next Step/Page if the current one is valid
Pricing ActivationFeeShow
If the toggle is on then the Activation Fee is shown to the user, otherwise is hidden
Pricing Amount Show
If the toggle is on then the Pricing is shown to the user, otherwise is hidden
Pricing TaxAmount Show
If the toggle is on then the Tax Amount is shown to the user, otherwise is hidden
Pricing TotalPrice Show
If the toggle is on then the Total Price is shown to the user, otherwise is hidden
Spinner Show
If the toggle is on then the Spinner will be shown while an an action is performed (typically a request to the API)
Should this step be added to Step Indicator?
If the toggle is on then the Step is be included in Step Indicator
Title
The title of the Step
Delivery Information
and Billing Information
Property Name
Description
AddressLine Placeholder
Placeholder of the AddressLine input
City Placeholder
Placeholder of the City input
FirstName Placeholder
Placeholder of the FirstName input
LastName Placeholder
Placeholder of the LastName input
PhoneNumber Placeholder
Placeholder of the PhoneNumber input
SecondAddressLine Placeholder
Placeholder of the SecondAddressLine input
State Placeholder
Placeholder of the State dropdown; if not specified then the first dropdown option will be preselected
Zipcode Placeholder
Placeholder of the Zipcode input
NotRoutable OfferGroupId
OfferGroupId offered to the user in case the delivery is not possible for the zipcode entered
NotRoutable LinkText
The text of the link that redirects user to a special offer, shown in case the delivery is not possible for the zipcode entered
NotRoutable DisclaimerText
The disclaimer text shown in case the delivery is not possible for the zipcode entered
NotRoutable NoOffersErrorMessage
The error message shown in case there are no offers for the zipcode entered
Footer
Property Name
Description
Body
Footer body, HTML-formatted fragment
StylingBackgroundColor
Color of the Footer background
StylingBorderColor
Color of the Footer border
Cookie Notice
Property Name
Description
Cookie Text
The text of the Cookie Notice
Cookie Link
The text of the link, usually ‘Private Policy’
Cookie Link Text
The link, usually resurects user to the Private Policy details
Styling TextColor
The color of the Cookie Text and Cookie Link Text
Styling BackgroundColor
The color of the backgroung
Idle Popover
Property Name
Description
Title
The title of the popover
Body
The main popover text
Idle Timeout
The timeout in seconds. If user stays active for the timeout specified then the Idle Popover will be displayed
Number of Openings
The number of times the popover will be displayed to the end users
Abandonment Popover
Property Name
Description
Title
The title of the popover
Body
The main popover text
BackgroundColor
The color of the popover background
Number of Openings
The number of times the popover will be displayed to the end users
BackgroundImage
The Image set as the popover background
Registration on Confirmation
Property Name
Description
Title
The title; usually offers user to create a password to register
SuccessMessage
success message, show in case user has been successfully registered
Order Summary
Property Name
Description
BillingInformation.Show
Toggle; if the toggle is set to ON then Billing Information block is displayed, otherwise is hidden
DeliveryInformation.Edit
Toggle; if the toggle is set to ON then the icon allowing to edit Delivery Information is displayed, otherwise there is no icon
PaymentInformation.Show
Toggle; if the toggle is set to ON then Payment Information block is displayed, otherwise is hidden
UserInformation.Email.Show
Toggle; if the toggle is set to ON then User Email is displayed, otherwise is hidden
UserInformation.Show
Toggle; if the toggle is set to ON then User Information block is displayed