The Contextual Content component dynamically shows state-specific content to users based on their location. For example, a user in Virginia sees Virginia-specific articles, while a user in Florida sees Florida content.
Content authors control what shows for each state by authoring Experience Fragments and mapping them in an ACS Commons Generic List.
If the user's state is detected → they see the Experience Fragment for their state
If the state is unknown or not in the list → they see the "default" Experience Fragment
If nothing can be loaded → the component is hidden (no blank space)
All visible content (headings, articles, CTAs, images) is authored inside the Experience Fragment. The component itself has no visible UI — it just loads the right XF.
The Experience Fragments used with this component support the following components:
For the most reliable experience, stick to static content components: Title, Text, Button, Featured List/Tile (static, no pagination), Article Image, Container, and Separator. These render purely from HTML/CSS and are guaranteed to work.
Risk with React components inside the XF: - Performance: The XF itself is fetched async. Then the React chunk must load. Then the component makes its own API calls. This stacks 2-3 network round-trips before content appears — users may see a brief empty/shimmer state. - Complexity: If the React component depends on events from other page components (e.g., UDD listens for LOCATION_SEARCH_TRIGGERED), timing may be unpredictable since it initialized later than normal. - Testing: These combinations are less commonly tested. Verify on staging before going to production. The Experience Fragments used with this component support the following components:
Setting up the prerequisites before using the Contextual Container component.
Following the creation of the state XFs, it is time to add them to your generic list.
Important rules: - Titles must be lowercase state names (e.g., virginia not Virginia) - Always include a default entry — this is the fallback - Values must be the full XF path ending in /master.
Now that the prerequisites are set up, the author can add this component to their page and author it.
The configuration dialog enables the content author to define the button's behavior, appearance, and interaction with a visitor on the page.
Q: What determines the user's state? The AARP location service detects the user's state (via IP geolocation). It stores this in the browser as aarpState.
Q: Can I use this on multiple pages? Yes. The same component + generic list can be reused on any page (homepage, state pages, Now app). Just drop the component and point it to the same list.
Q: What if I add a new state later? Add a new entry to the Generic List and create its XF. No code changes needed.
Q: Can one XF be shared across multiple states? Yes. Point multiple list entries to the same XF path.
Q: Can I use a Featured List with 3 cards? Yes. A static featured list with 3 tiles (no "Load More", no tabbed filtering) works perfectly. Images, titles, links, and hover effects all work.
Q: Will videos work inside the XF? Brightcove Video is not recommended. The video player SDK may not initialize properly when loaded dynamically. Use static content instead.
Q: Can I use UDD or Location Search inside the XF? Yes, they are supported. However, they add extra loading time (chunk download + API calls) on top of the XF load. Users may see a brief empty/shimmer state before content appears. Test on staging first.
