How to create Interactive Web Banner
Posted by The Team at Mindmatrix on 15 February 2018 11:18 AM


This feature allows users to create interactive banners that can be used for internal (AMP pages such as the dashboard, internal playbooks & welcome page) and external (assets created in AMP such as web, landing pages, data room etc.) pages

Who will be using this?

This feature is role-based and can be used by users who have the permission.


Interactive banner allows users to create attractive & attention grabbing banners using text, images, videos, call to action buttons, slide-shows and fancy animation styles


To create an interactive banner, select ‘Templates’ from ‘Asset Management’ Under ‘Set Up’


Select ‘Web Banner’


Click ‘Create’ to design a new banner


Give the banner a name, description, validity & filters. Click on ‘Next’ to continue


Select the type of banner you wish to create

  • External: Banner for assets such as web, landing pages, data rooms
  • Internal: Banner for AMPs dashboard, welcome page & internal playbooks

Note: We can use animation style in type of any web banner.

Click ‘Next’ to proceed to the editor


You can start by giving the section a background color or image


Click on the ‘Add’ menu to add objects to the editor. Either ‘click on the object’ or ‘drag & drop the object’ that you wish to add to the editor


Once you are done designing, you can use the various animation styles provided for every object


For example, in the screenshot above, the image has been given rank 1, animation type is slide and the direction has been set as left.

Similarly, in the screenshot below, the animation property of the call to action button has been set to Rank: 2, Animation style: slide & Direction: right

So now when you get the preview, the image slides in first from the left since its rank is 1 & direction set is left


And the Call to action button appears next from the right as its animation properties have been set to rank 2 & slide in from right

Similarly, you can add animation styles to all objects in the editor.


Linking objects to pages within AMP:

Note: This feature is exclusive to INTERNAL banners.

To link objects like images, text or call to action buttons with pages within AMP, click on the ‘Map To URL’ button in the object property box


Click on ‘Internal links’


Select the page that you wish to link the object to & click ‘Save’


So in the output, clicking the call to action button would open the ‘Internal Playbook’ page in a new tab



How to create Slideshow banners:

To make the banner appear like a slideshow, click on the ‘Page list’ button


Click on the ‘Add’ button to add the number of slides that you want the banner to have


To start designing, navigate to the slide by clicking it


Once done, click on the ‘Settings’ button


Select the animation properties for the slide


  • Transition: defines the animation style in which the slide should enter the screen
  • Duration (in seconds): is for how long the slide should stay on the screen
  • Direction: is where you want the slide the enter the screen from


In the example above, the transition has been set to ‘slide’, duration is 10 seconds & the direction is right

While for Slide 2, the transition has been set to ‘slide’, duration is 10 seconds & the direction is left


Now in the output, the first banner slides in from the right & waits for 10 seconds


After 10 seconds, the second banner enters from the left and waits for 10 seconds before the third banner enters

Once done, click on ‘Finish’ to save and exit the editor


Important Note:

  • As internal banners can contain links to pages within AMP, they can only be uploaded in the banner section for dashboard, welcome page & internal playbooks. You cannot use them in any other assets created in AMP
  • Adding external interactive banners to assets such as web, landing pages, data room etc. is still under construction and shall be released soon.

Interested in learning more about Mindmatrix software? Join our email list to get the latest software release notes, videos and how-to articles.

Comments (0)
Post a new comment
Full Name:
CAPTCHA Verification 
Please enter the text you see in the image into the textbox below (we use this to prevent automated submissions).