How to add custom content to your popups and panels

To add images to a popup or panel or customize the styling, you can use the Custom content option. You will find this option in the Popups or Popups & Panels settings. 

    1
    Make sure the data you would like to display in your popups has already been bound under Metadata for popups in the Data tab. 

    WARNING: Please note that in our map templates (such as Projection map and 3D map), both the Regions and Points layers support custom popups. Make sure that you are binding the correct columns in the correct sheet, depending on where exactly you'd need custom popup content.

    2
    In the Preview tab, enable popups and select Custom content.

    TIP: If you would like to display the content in your popup panels, make sure you do this in the panels section, not the popup section. You can also configure content for both.

    3
    In the area for custom content, add your images or custom content in HTML. You can also access information from other columns here by adding them in curly brackets {{}}. Make sure that any data you try to access through brackets has been added to the Select columns to visualise area before. 

    Here's how you can add an image, for example: 
      
    <img src="{{Image}}" height="100"> <p>Party: {{Party}}</p><br>

    TIP: Encountering an issue? Read step 4 of this help doc to learn how to add an image as a background instead.

    And here's how you can add a link. Keep in mind that when you're adding links, they will have to start with an "http://" or an "https://" to display correctly: 

    <a href="{{Link}}">Click me!</a>
    You might want to make your link open in a new tab. You can achieve that by adding a target="_blank" to your link: 
    <a href="{{Link}}" target="_blank">Click me!</a>
    4
    You can also add videos in the same way. To do this, upload your video to Flourish by right-clicking on the cell and selecting Upload file. Then, refer to it via HTML. 
    <video width="320" height="240"> <source src="{{Video}}" type="video/mp4"><br>
    5
    If you're encountering the issue that some of your content is loading before the popup itself is loaded, you can add your image as the background of a div instead of as an image. To do this, simply add a div and give it a class of image. 

    <div class="image"></div>
    Then, set the size of the popup and add your image as a background image within brackets. Make sure and add the property background-size: cover. Here's what the content of your "custom content" area should now look like: 

    <div class="image">
</div>

<a href="http://flourish.studio" target="_blank">This is a link.</a>

<style>
.image{
width: 220px;
height: 150px;
background-image:url("{{gif}}");
background-size: cover;
}
</style>
    6
    You can even add custom charts or polling results to your popups or panels by referring to data within your datasheet, or hide certain information based on a column in your datasheet.
    7
    Completely custom popup content can only be added to leaf nodes (shapes representing a single value) in the Hierarchy template, but you can specify on which levels you would like popup content to display at all.

Related Articles