Creating a Popup Using a Canva Image

Christy Cook Updated by Christy Cook

A  DailyStory Popup enables you to display a popup window in a web or mobile experience. Popups can be shown on specific pages, configured to automatically show after a certain amount of time has passed, when the visitor first arrives, or if the visitor is leaving the site.

You can use DailyStory's standard designer and image placement or use an image designed in another platform for more sizzle and creative options. 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.

First, create your popup image in Canva

  1. Log in to your Canva account.
  2. Click on Create Design and select Custom Size.
  1. Set the image size to 780px by 480px and then click Create new design.
  1. Design your image with background colors, fonts, pictures, etc. Use the top and outside edge but leave an area open for your DailyStory content and form fields.
This example will be based on the text and form fields being on the left, but you can choose other display layout options in the DailyStory designer.
  1. Download your image from Canva to your desktop by clicking on the Share button in the top right-hand corner and then select Download. You can leave the image as a PNG as suggested and then click on the Download button to place the image on your computer.
  1. Upload the saved image to your DailyStory file manager by navigating to Outbound > File Manager and then clicking on + Upload Files. Select the saved image to upload it to your DailyStory File Manager.

Second, create a popup in DailyStory

You can create a popup from within a campaign or from your all Popups home screen.

From within a campaign

  1. Click on the Assets tab.
  2. Click on the green + Add Asset button.
  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. Skip to the step below "Assign your Canva image..."

From the all Popups 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 + Create Popup.

  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)

Next, set your popup's Layout Options

  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.

Next, assign your Canva image and display options

  1. From the popup editor, select the tab Display Options.
  2. Display Options: Choose Display as popup (fades out the background) or Display as cover (blacks out the background).
  3. Height and Width: Set Max Width to 780 and set the Max Height to 480.
  4. 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.

Finally, 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.

To find Paused or Archived popups:

  1. Navigate to Inbound > Popup Forms.
  2. Click on the hamburger menu in the top left (3 lines).
  1. Click on Paused or Archived.
  1. Click on the name of the popup to open the designer and re-activate.

Other Helpful Articles:

How Did We Do?

Creating Popups

Configuring a Popup's Basic Settings

Contact