> For the complete documentation index, see [llms.txt](https://docs.navigaglobal.com/naviga-subscribe/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.navigaglobal.com/naviga-subscribe/csr-user-guide/subscription-panel-user-guide/subscription-panel-user-guide-2f877606df014b30b6e2270df38bdd7c-44/untitled.md).

# Component Matrix

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. 

{% tabs %}
{% tab title="Address " %}
Address Components are related to billing and address information.

| 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                       |
| {% endtab %}         |                                        |                            |                           |

{% tab title="Core Structure" %}
Core Structure components shape the basic layout and structure of presentations.

| Component              | Description                                                                                                                                                  | Possible Parent Components     | Possible Child Components                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
| ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Confirmation           | A container for any details confirming a purchase.                                                                                                           | Page                           | <p>RSSFeed<br>SocialMedia<br>NewsLetterBenefit<br>AppDownloads<br>RegistrationOnConfirmation</p>                                                                                                                                                                                                                                                                                                                                                                                     |
| Header                 | A container that displays a header. Can be configured as either top-level or as a child, depending on need.                                                  | <p>Presentation</p><p>Page</p> | N/A                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
| HeaderExtended         | Extends the header section.                                                                                                                                  | <p>Presentation</p><p>Page</p> | N/A                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
| HeaderGUP              | Client specific header, for GUP clients only.                                                                                                                | <p>Presentation</p><p>Page</p> | 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. | <p>Presentation</p><p>Page</p> | 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                   | <p>Step<br>LandingTabbed<br>LandingTiles<br>LandingFullScreen<br>LandingAlignedImage<br>LandingZipFirst<br>Landing<br>OfferSelectorTiles<br>OfferSelectorCheckbox<br>OfferSelectorCSR<br>OfferSelector<br>OfferSelectorApplePay<br>OfferSelectorDropdown<br>OfferSelectorSmallTiles<br>AbandonmentPopover<br>IdlePopover<br>GiftDetails<br>Checkbox<br>CheckboxVT<br>Header,<br>HeaderExtended<br>HeaderGUP<br>Footer<br>StepIndicator<br>Confirmation<br>NotificationGeographic</p> |
| PresentationProperties | Displays global presentation settings (e.g. theme, recaptcha, etc).                                                                                          | Any container component.       | N/A                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
| Step                   | Adds a "step" to the Page Component.                                                                                                                         | Page                           | <p>DeliveryInformation<br>BillingInformation<br>Input<br>PaymentMethods<br>EZPay<br>MilitaryInformation<br>CollegeInformation<br>UserInformationNoAccount<br>InputGiftCode<br>CheckboxVT<br>ScheduledStart<br>Checkbox<br>GiftRecipient<br>PlaceOrder<br>ApplePayEdgil<br>GiftDetails<br>EmailPreferences</p>                                                                                                                                                                        |
| {% endtab %}           |                                                                                                                                                              |                                |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |

{% tab title="Landings & Promotions " %}
Landings and Promotions Components organize your landing page and any promotions that you are currently running.&#x20;

| 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                       | <p>PromotionDigital</p><p>PromotionZipcode</p><p>PromotionUpsell</p><p>PromotionLinkOnly</p><p>OfferSelector</p> |
| 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                                                                                                              |
| {% endtab %}        |                                                                                             |                            |                                                                                                                  |

{% tab title="Offers" %}
Offer Components are used to design and describe offers.

| 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                       |
| {% endtab %}            |                                                                                                                                  |                            |                           |

{% tab title="Optional UI" %}
Optional UI components add various UI elements.

| 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             | <p>Step</p><p>Page</p>    |
| CheckboxVT         | Allows for special Vermont postal codes.                                                                                                     | <p>Step</p><p>Page</p>     | N/A                       |
| GiftDetails        | Allows the user to select an offer that was triggered with a gift code.                                                                      | <p>Step</p><p>Page</p>     | 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                       |
| {% endtab %}       |                                                                                                                                              |                            |                           |

{% tab title="Payment" %}
Payment Components authorize various payment methods for purchases.

| Component             | Description                                                                                                        | Possible Parent Components | <p>Possible Child </p><p>Components</p>                                                                                                                                                                                                                                                                  |
| --------------------- | ------------------------------------------------------------------------------------------------------------------ | -------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| PaymentMethods        | A container for supported payment methods.                                                                         | Step                       | <p>PayPal,<br>PayPalExpress<br>CreditCard<br>CreditCardEdgil<br>CreditCardVindicia<br>CreditCardChase<br>CreditCardCyberSource<br>CreditCardStripe<br>CreditCardBrainTree<br>CreditCardHOH<br>CreditCardAuthorizeNet<br>CreditCardSpreedly<br>BillMe<br>BankAccountChase<br>BankAccount<br>PayPalDTI</p> |
| 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                                                                                                                                                                                                                                                                                                      |
| {% endtab %}          |                                                                                                                    |                            |                                                                                                                                                                                                                                                                                                          |

{% tab title="User Data" %}
User Data components are designed to collect user data.

| <p></p><p>Components</p>   | Description                                                                                          | <p>Possible Parent </p><p>Components</p> | <p>Possible Child </p><p>Components</p> |
| -------------------------- | ---------------------------------------------------------------------------------------------------- | ---------------------------------------- | --------------------------------------- |
| 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                                     |
| {% endtab %}               |                                                                                                      |                                          |                                         |

{% tab title="Widget and Alerts" %}
Widget Components make presentations interactive with various popovers, notifications, etc.

| 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                       |
| {% endtab %}           |                                                                                                                 |                            |                           |
| {% endtabs %}          |                                                                                                                 |                            |                           |

{% hint style="info" %}
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.
{% endhint %}

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**:

| 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                                                                          |