Creating a Popup Using a Canva Image

Christy Cook Updated by Christy Cook

A  DailyStory Popup lets you display a popup window in a web or mobile experience. Popups have multiple options for how and when you show them:

  • They can be shown on specific pages
  • Configured to show after a certain amount of time has passed
  • Can be shown when the visitor first arrives
  • Or, when the visitor is leaving the site.

You can use DailyStory's standard designer and image placement, which can use images already in your file manager, uploaded from your desktop, or from one of our image integrations like Canva or Unsplash.

Canva is an online design platform software used to create graphics and other visual content. They have free and paid versions. This article walks you through how to use an image created in Canva with or without our native integration.

Using Canva images from the Canva integration

First, make sure you have linked your Canva account. See this step-by-step article for setting up the Canva integration.

Once your Canva account is linked, create a popup from within a campaign or from the Popups dashboard.

From within a campaign

  1. Click on the Assets tab on the left-side menu.
  2. Click on the pink + Create New button in the top right.
  3. Select Add a Popup from the popup menu.
  4. Next, you will be taken to the Popup Editor to begin designing your popup. The popup editor provides a live preview of your popup as you begin to design it. Start with giving your popup a Name and clicking on Save Changes. (The name is only for internal use)
  5. From the popup editor, select the tab Display Options.
  6. Display Options: Choose Display as popup (fades out the background) or Display as cover (blacks out the background).
  7. Height and Width: Set Max Width to 780 and set the Max Height to 480.
  8. Background Image: Click the Select button.
  9. Click on the Canva button to display your created Canva images from your Canva account.
  1. Select the image you'd like to use and then click the pink Select button.
  2. Click Save Changes to save your changes.

From the Popup Forms page

  1. Navigate to Inbound > Popup Forms from the navigation menu at the top of your screen.
  2. This will show you a list of all the existing popups. To create a new popup, click the +Create New button or Create Popup from the Quick Actions menu on the left.
  1. You will be asked to assign the popup to an existing campaign or create a new campaign.
  1. Next, you will be taken to the Popup Editor to begin designing your popup. The popup editor provides a live preview of your popup as you begin to design it. Start with giving your popup a Name and clicking on Save Changes. (The name is only for internal use)
  1. From the popup editor, select the tab Layout Options.
  2. Based on our example where we created our blank space for text on the left, we'll select the first option where the text is on the left.
  1. Border and Padding: we'll use Round as our style with no width or color, 50 Pixels for the top/bottom and 40 pixels for the right/left. You can play around with the look you want and click on Advanced Display Options for more customizable options.
  1. Click on Save Changes.
  2. From the popup editor, select the tab Display Options.
  3. Display Options: Choose Display as popup (fades out the background) or Display as cover (blacks out the background).
  4. Height and Width: Set Max Width to 780 and set the Max Height to 480.
Before you can complete the next steps and select your created Canva image, create the image in Canva and save it to your desktop.
  1. Background Image: Click the Select button and find the image in your File Manager that was saved earlier.
  1. Click Save Changes to save your changes.

Add text and form fields in basic settings

  1. Click on the Basic Settings tab.
  2. Content: Add several blank lines and then fill in your content. Based on the amount of content you have and the form fields you want, you will need to play around with how many lines to skip and the font size for the best fit.
  1. Call to Action Button: Choose what you want your CTA button to say.
  2. Call to Action URL: insert the website URL your lead will go once they submit your popup.
  3. Lead Capture: Select the form fields you want to capture (name, email, mobile phone)
Click on the Options buttons for the applicable sections for more customizable options.

  1. Show this Popup: select where you want the popup shown (single pages, across website, etc.)
  2. Click on Save Changes or Save & Close if you are finished designing your popup.

Activate your popup

Once you are finished designing your popup, we suggest the following steps:

  1. Test your popup: you can do this on the Basic Settings tab by clicking on the Test Popup button.
  1. Confirm where your popup is running: double check your "Show this Popup" settings on the Basic Settings tab and that you have selected pages or across website.
  1. Deactivate other popups: make sure you don't have any other popups running on the same pages you have selected for this popup.
  2. Activate popup: click the Activate Popup button to activate your popup.

Other Helpful Articles:

How Did We Do?

Creating Popups

Configuring a Popup's Basic Settings

Contact