Destination Modal for XF

Short description:

The destination modal represents the classic AIDA modal, but instead of static data, it uses structured data from the content fragment. This is intended to reduce the maintenance effort for the editor and to ensure uniformity of the destination content. The composition of the modal consists of simple elements and does not use any outstanding functionality.

Marketing purpose:

The user can open a modal by clicking on a CTA link or pin on a map. The modal then reveals further information that the user does not need to see directly on the page. In the modal itself, the user then has another option to jump off and dive deeper into the funnel.


How to implement

First, create a new Content Fragment, in this case, inside the folder destinations.

Create Content Fragment

Fill your content fragment with all the required information, like name, link, image, marketing facts, etc.

Edit Content Fragment: General Settings
Edit Content Fragment: Long Text
Edit Content Fragment: Add Image
Edit Content Fragment: Facts

Now create an Experience Fragment and choose the CF you already created.

Create Experience Fragments
Select Content Fragment in the Experience Fragment
Choose Destination

Now create a teaser and select the link to the Experience Fragment you just created by checking "Open as Popup".

CTA: Open as Popup

Your modal is ready. Test it on Preview mode.

Modal with XF and CF

Test Teaser

Click the CTA to open the modal on preview mode.

  1. titleType: div
  2. linkURLHidden: ,
  3. imageFromPageImage: false
  4. pretitle: Test Teaser
  5. titleFromPage: false
  6. asset: false
  7. modal: false
  8. jcr:description: <p>Click the CTA to open the modal on preview mode.</p>
  9. linkTarget: _self
  10. descriptionFromPage: false
  11. sling:resourceType: aida-component-library/core/components/content/teaser
  12. isDecorative: false
  13. textIsRich: true
  14. altValueFromDAM: false
  15. cq:styleIds: 1645620796744
    
        

    

Test Teaser

Click the CTA to open the modal on preview mode.