{"Status":true,"Message":"","Response":{"post":{"postuid":"sevm78rpqi","tenantuid":"d8b744fc-2e70-4089-bb80-dd1d08f6c7b2","projectuid":"239698c5-f7eb-4574-8cc8-c6568f08b3a0","title":"Creating a Popup Using a Canva Image","slug":"article/sevm78rpqi-creating-a-popup-using-a-canva-image","html":"\u003Cp\u003EA\u0026nbsp; \u003Ca href=\u0022https://www.dailystory.com/features/welcome-exit-offers/\u0022\u003EDailyStory Popup\u003C/a\u003E\u0026nbsp;lets you display a popup window in a web or mobile experience. Popups have multiple options for how and when you show them:\u003C/p\u003E\u003Cul\u003E\u003Cli\u003EThey can be shown on specific pages\u003C/li\u003E\u003Cli\u003EConfigured to show after a certain amount of time has passed\u003C/li\u003E\u003Cli\u003ECan be shown when the visitor first arrives\u003C/li\u003E\u003Cli\u003EOr, when the visitor is leaving the site.\u003C/li\u003E\u003C/ul\u003E\u003Cp\u003EYou can use DailyStory\u0027s 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.\u003C/p\u003E\u003Cp\u003E\u003Ca href=\u0022https://www.canva.com/\u0022 target=\u0022_blank\u0022\u003ECanva\u003C/a\u003E 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.\u003C/p\u003E\u003Cimg class=\u0022lazy-load\u0022 data-width=\u0022682\u0022 data-height=\u0022499\u0022 data-src=\u0022https://graffiti-auf7e6dwhxhcbwek.z03.azurefd.net/d8b744fc-2e70-4089-bb80-dd1d08f6c7b2/239698c5-f7eb-4574-8cc8-c6568f08b3a0/942c8c3cc74ec7e10d18a084d3845285.png\u0022 style=\u0022\u0022 alt=\u0022\u0022/\u003E\u003Ccite class=\u0022recommended\u0022\u003E\u003Cspan class=\u0022title\u0022\u003ERecommended\u003C/span\u003E\u003Cp\u003ECreate your image in Canva first, sized appropriately for width of 780 and height to 480. You\u0027ll want to leave enough blank space to format the submission buttons and/or added text. Please reference the above image for inspiration.\u0026nbsp;\u003C/p\u003E\u003C/cite\u003E\u003Ch3 id=\u0022using_canva_images_from_the_canva_integration\u0022\u003EUsing Canva images from the Canva integration\u003C/h3\u003E\u003Cp\u003EFirst, make sure you have linked your Canva account. See this step-by-step article for \u003Ca href=\u0022/article/spkp75vtwz-canva-integration\u0022\u003Esetting up the Canva integration\u003C/a\u003E.\u003C/p\u003E\u003Cp\u003EOnce your Canva account is linked, create a popup from within a campaign or from the Popups dashboard.\u003C/p\u003E\u003Ch4 id=\u0022from_within_a_campaign\u0022\u003EFrom within a campaign\u003C/h4\u003E\u003Col\u003E\u003Cli\u003EClick on the \u003Cb\u003EAssets\u003C/b\u003E tab on the left-side menu.\u003C/li\u003E\u003Cli\u003EClick on the pink \u003Ccode\u003E\u002B Create New\u003C/code\u003E button in the top right.\u003C/li\u003E\u003Cli\u003ESelect \u003Ccode\u003EAdd a Popup\u003C/code\u003E from the popup menu.\u003C/li\u003E\u003Cli\u003ENext, 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 \u003Cb\u003EName\u003C/b\u003E and clicking on \u003Ccode\u003ESave Changes\u003C/code\u003E. (The name is only for internal use)\u003C/li\u003E\u003Cli\u003EFrom the popup editor, select the tab \u003Ca href=\u0022/article/m4jk83serm-configuring-a-popups-display-options\u0022\u003E\u003Cb\u003EDisplay Options\u003C/b\u003E\u003C/a\u003E\u003Cb\u003E.\u003C/b\u003E\u003C/li\u003E\u003Cli\u003E\u003Cb\u003EDisplay Options:\u003C/b\u003E Choose Display as popup (fades out the background) or Display as cover (blacks out the background).\u003C/li\u003E\u003Cli\u003E\u003Cb\u003EHeight and Width\u003C/b\u003E: Set Max Width to 780 and set the Max Height to 480.\u003C/li\u003E\u003Cli\u003E\u003Cb\u003EBackground Image:\u003C/b\u003E Click the \u003Ccode\u003ESelect\u003C/code\u003E button.\u003C/li\u003E\u003Cli\u003EClick on the \u003Ccode\u003ECanva\u003C/code\u003E button to display your created Canva images from your Canva account.\u003C/li\u003E\u003C/ol\u003E\u003Cimg class=\u0022lazy-load\u0022 data-width=\u0022306\u0022 data-height=\u0022245\u0022 data-src=\u0022https://graffiti-auf7e6dwhxhcbwek.z03.azurefd.net/d8b744fc-2e70-4089-bb80-dd1d08f6c7b2/239698c5-f7eb-4574-8cc8-c6568f08b3a0/d2e52d178dc548a16f1c0eed6f6adb06.png\u0022 style=\u0022\u0022 alt=\u0022\u0022/\u003E\u003Col start=\u002210\u0022\u003E\u003Cli\u003ESelect the image you\u0027d like to use and then click the pink \u003Ccode\u003ESelect\u003C/code\u003E button.\u003C/li\u003E\u003Cli\u003EFrom the popup editor, select the tab \u003Ca href=\u0022/article/vbt6trt1ke-configuring-a-popups-layout-options\u0022 target=\u0022_blank\u0022\u003ELayout Options\u003C/a\u003E.\u003C/li\u003E\u003Cli\u003EBased on our example where we created our blank space for text on the left, we\u0027ll select the first option where the text is on the left.\u003C/li\u003E\u003C/ol\u003E\u003Cimg class=\u0022lazy-load\u0022 data-width=\u0022571\u0022 data-height=\u0022493\u0022 data-src=\u0022https://graffiti-auf7e6dwhxhcbwek.z03.azurefd.net/d8b744fc-2e70-4089-bb80-dd1d08f6c7b2/239698c5-f7eb-4574-8cc8-c6568f08b3a0/343541170e355456e3668d048babd81b.png\u0022 style=\u0022\u0022 alt=\u0022\u0022/\u003E\u003Cp\u003E13. Click \u003Ccode\u003ESave Changes\u003C/code\u003E to save your changes.\u0026nbsp;\u003C/p\u003E\u003Ch4 id=\u0022from_the_popup_forms_page\u0022\u003EFrom the Popup Forms page\u003C/h4\u003E\u003Col\u003E\u003Cli\u003ENavigate to \u003Ccode\u003EInbound \u0026gt; Popup Forms\u003C/code\u003E from the navigation menu at the top of your screen.\u003C/li\u003E\u003Cli\u003EThis will show you a list of all the existing popups. To create a new popup, click the \u003Ccode\u003E\u002BCreate New\u003C/code\u003E button or \u003Ccode\u003ECreate Popup\u003C/code\u003E from the Quick Actions menu on the left.\u003C/li\u003E\u003C/ol\u003E\u003Cimg class=\u0022lazy-load\u0022 data-width=\u00221025\u0022 data-height=\u0022345\u0022 data-src=\u0022https://graffiti-auf7e6dwhxhcbwek.z03.azurefd.net/d8b744fc-2e70-4089-bb80-dd1d08f6c7b2/239698c5-f7eb-4574-8cc8-c6568f08b3a0/d64bef027c4eb08490a39621e4d0b18b.png\u0022 style=\u0022\u0022 alt=\u0022\u0022/\u003E\u003Col start=\u00223\u0022\u003E\u003Cli\u003EYou will be asked to assign the popup to an existing campaign or create a new campaign.\u003C/li\u003E\u003C/ol\u003E\u003Cimg class=\u0022lazy-load\u0022 data-width=\u0022618\u0022 data-height=\u0022456\u0022 data-src=\u0022https://graffiti-auf7e6dwhxhcbwek.z03.azurefd.net/d8b744fc-2e70-4089-bb80-dd1d08f6c7b2/239698c5-f7eb-4574-8cc8-c6568f08b3a0/9b4837bfa39d0e9ccb050c22e2135633.png\u0022 style=\u0022\u0022 alt=\u0022\u0022/\u003E\u003Col start=\u00224\u0022\u003E\u003Cli\u003ENext, 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 \u003Cb\u003EName\u003C/b\u003E and clicking on \u003Ccode\u003ESave Changes\u003C/code\u003E. (The name is only for internal use)\u003C/li\u003E\u003C/ol\u003E\u003Cimg class=\u0022lazy-load\u0022 data-width=\u00221025\u0022 data-height=\u0022709\u0022 data-src=\u0022https://graffiti-auf7e6dwhxhcbwek.z03.azurefd.net/d8b744fc-2e70-4089-bb80-dd1d08f6c7b2/239698c5-f7eb-4574-8cc8-c6568f08b3a0/a096adee7064a5553a117515c4da2249.png\u0022 style=\u0022\u0022 alt=\u0022\u0022/\u003E\u003Col start=\u00225\u0022\u003E\u003Cli\u003EFrom the popup editor, select the tab \u003Ca href=\u0022/article/vbt6trt1ke-configuring-a-popups-layout-options\u0022 target=\u0022_blank\u0022\u003ELayout Options\u003C/a\u003E.\u003C/li\u003E\u003Cli\u003EBased on our example where we created our blank space for text on the left, we\u0027ll select the first option where the text is on the left.\u003C/li\u003E\u003C/ol\u003E\u003Cimg class=\u0022lazy-load\u0022 data-width=\u0022571\u0022 data-height=\u0022493\u0022 data-src=\u0022https://graffiti-auf7e6dwhxhcbwek.z03.azurefd.net/d8b744fc-2e70-4089-bb80-dd1d08f6c7b2/239698c5-f7eb-4574-8cc8-c6568f08b3a0/343541170e355456e3668d048babd81b.png\u0022 style=\u0022\u0022 alt=\u0022\u0022/\u003E\u003Col start=\u00227\u0022\u003E\u003Cli\u003E\u003Cb\u003EBorder and Padding\u003C/b\u003E: we\u0027ll 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 \u003Ca href=\u0022/article/m4jk83serm-configuring-a-popups-display-options\u0022 target=\u0022_blank\u0022\u003EAdvanced Display Options\u003C/a\u003E for more customizable options.\u003C/li\u003E\u003C/ol\u003E\u003Cimg class=\u0022lazy-load\u0022 data-width=\u0022553\u0022 data-height=\u0022352\u0022 data-src=\u0022https://graffiti-auf7e6dwhxhcbwek.z03.azurefd.net/d8b744fc-2e70-4089-bb80-dd1d08f6c7b2/239698c5-f7eb-4574-8cc8-c6568f08b3a0/c94767656cd74be5dc89683c60c8a018.png\u0022 style=\u0022\u0022 alt=\u0022\u0022/\u003E\u003Col start=\u00228\u0022\u003E\u003Cli\u003EClick on \u003Ccode\u003ESave Changes\u003C/code\u003E.\u003C/li\u003E\u003Cli\u003EFrom the popup editor, select the tab \u003Ca href=\u0022/article/m4jk83serm-configuring-a-popups-display-options\u0022\u003E\u003Cb\u003EDisplay Options\u003C/b\u003E\u003C/a\u003E\u003Cb\u003E.\u003C/b\u003E\u003C/li\u003E\u003Cli\u003E\u003Cb\u003EDisplay Options:\u003C/b\u003E Choose Display as popup (fades out the background) or Display as cover (blacks out the background).\u003C/li\u003E\u003Cli\u003E\u003Cb\u003EHeight and Width\u003C/b\u003E: Set Max Width to 780 and set the Max Height to 480.\u003C/li\u003E\u003C/ol\u003E\u003Ccite class=\u0022recommended\u0022\u003E\u003Cspan class=\u0022title\u0022\u003ERecommended\u003C/span\u003E\u003Cp\u003EBefore you can complete the next steps and select your created Canva image, create the image in Canva and save it to your desktop.\u003C/p\u003E\u003C/cite\u003E\u003Col\u003E\u003Cli\u003E\u003Cb\u003EBackground Image:\u003C/b\u003E Click the \u003Ccode\u003ESelect\u003C/code\u003E button and find the image in your File Manager that was saved earlier.\u003C/li\u003E\u003C/ol\u003E\u003Cimg class=\u0022lazy-load\u0022 data-width=\u0022663\u0022 data-height=\u0022445\u0022 data-src=\u0022https://graffiti-auf7e6dwhxhcbwek.z03.azurefd.net/d8b744fc-2e70-4089-bb80-dd1d08f6c7b2/239698c5-f7eb-4574-8cc8-c6568f08b3a0/c130cd51dc480772d6d36c43e4c48de3.png\u0022 style=\u0022\u0022 alt=\u0022\u0022/\u003E\u003Col start=\u00225\u0022\u003E\u003Cli\u003EClick \u003Ccode\u003ESave Changes\u003C/code\u003E to save your changes.\u003C/li\u003E\u003C/ol\u003E\u003Ch3 id=\u0022add_text_and_form_fields_in_basic_settings\u0022\u003EAdd text and form fields in basic settings\u003C/h3\u003E\u003Col\u003E\u003Cli\u003EClick on the \u003Ca href=\u0022/article/zm3a9h2uod-configuring-popups\u0022\u003EBasic Settings\u003C/a\u003E tab.\u003C/li\u003E\u003Cli\u003E\u003Cb\u003EContent:\u003C/b\u003E 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.\u003C/li\u003E\u003C/ol\u003E\u003Cimg class=\u0022lazy-load\u0022 data-width=\u00221025\u0022 data-height=\u0022351\u0022 data-src=\u0022https://graffiti-auf7e6dwhxhcbwek.z03.azurefd.net/d8b744fc-2e70-4089-bb80-dd1d08f6c7b2/239698c5-f7eb-4574-8cc8-c6568f08b3a0/2abea9b8c57d9cacc30e00ddaf582dce.png\u0022 style=\u0022\u0022 alt=\u0022\u0022/\u003E\u003Col start=\u00223\u0022\u003E\u003Cli\u003E\u003Cb\u003ECall to Action Button:\u003C/b\u003E Choose what you want your CTA button to say.\u003C/li\u003E\u003Cli\u003E\u003Cb\u003ECall to Action URL\u003C/b\u003E: insert the website URL your lead will go once they submit your popup.\u003C/li\u003E\u003Cli\u003E\u003Cb\u003ELead Capture\u003C/b\u003E: Select the form fields you want to capture (name, email, mobile phone)\u003C/li\u003E\u003C/ol\u003E\u003Cimg class=\u0022lazy-load\u0022 data-width=\u0022564\u0022 data-height=\u0022625\u0022 data-src=\u0022https://graffiti-auf7e6dwhxhcbwek.z03.azurefd.net/d8b744fc-2e70-4089-bb80-dd1d08f6c7b2/239698c5-f7eb-4574-8cc8-c6568f08b3a0/9dcd10e1b834e58c2db8caa3cf4319ff.png\u0022 style=\u0022\u0022 alt=\u0022\u0022/\u003E\u003Ccite class=\u0022recommended\u0022\u003E\u003Cspan class=\u0022title\u0022\u003ERecommended\u003C/span\u003E\u003Cp\u003EClick on the \u003Ccode\u003EOptions\u003C/code\u003E buttons for the applicable sections for more customizable options.\u003C/p\u003E\u003C/cite\u003E\u003Col start=\u00226\u0022\u003E\u003Cli\u003E\u003Cb\u003EShow this Popup\u003C/b\u003E: select where you want the popup shown (single pages, across website, etc.)\u003C/li\u003E\u003Cli\u003EClick on \u003Ccode\u003ESave Changes\u003C/code\u003E or Save \u0026amp; Close if you are finished designing your popup.\u003C/li\u003E\u003C/ol\u003E\u003Ch3 id=\u0022activate_your_popup\u0022\u003EActivate your popup\u003C/h3\u003E\u003Cp\u003EOnce you are finished designing your popup, we suggest the following steps:\u003C/p\u003E\u003Col\u003E\u003Cli\u003E\u003Cb\u003ETest your popup\u003C/b\u003E: you can do this on the Basic Settings tab by clicking on the \u003Ccode\u003ETest Popup\u003C/code\u003E button.\u003C/li\u003E\u003C/ol\u003E\u003Cimg class=\u0022lazy-load\u0022 data-width=\u0022542\u0022 data-height=\u0022364\u0022 data-src=\u0022https://graffiti-auf7e6dwhxhcbwek.z03.azurefd.net/d8b744fc-2e70-4089-bb80-dd1d08f6c7b2/239698c5-f7eb-4574-8cc8-c6568f08b3a0/9f1b57d2d59fdc929eada76ad473d64d.png\u0022 style=\u0022\u0022 alt=\u0022\u0022/\u003E\u003Col start=\u00222\u0022\u003E\u003Cli\u003E\u003Cb\u003EConfirm where your popup is running\u003C/b\u003E: double check your \u0022Show this Popup\u0022 settings on the Basic Settings tab and that you have selected pages or across website.\u003C/li\u003E\u003C/ol\u003E\u003Cimg class=\u0022lazy-load\u0022 data-width=\u0022558\u0022 data-height=\u0022246\u0022 data-src=\u0022https://graffiti-auf7e6dwhxhcbwek.z03.azurefd.net/d8b744fc-2e70-4089-bb80-dd1d08f6c7b2/239698c5-f7eb-4574-8cc8-c6568f08b3a0/df7cfc9601282f127e6755cc843c3015.png\u0022 style=\u0022\u0022 alt=\u0022\u0022/\u003E\u003Col start=\u00223\u0022\u003E\u003Cli\u003E\u003Cb\u003EDeactivate other popups\u003C/b\u003E: make sure you don\u0027t have any other popups running on the same pages you have selected for this popup.\u003C/li\u003E\u003Cli\u003E\u003Cb\u003EActivate popup\u003C/b\u003E: click the \u003Ccode\u003EActivate Popup\u003C/code\u003E button to activate your popup.\u003C/li\u003E\u003C/ol\u003E\u003Cimg class=\u0022lazy-load\u0022 data-width=\u0022664\u0022 data-height=\u0022308\u0022 data-src=\u0022https://graffiti-auf7e6dwhxhcbwek.z03.azurefd.net/d8b744fc-2e70-4089-bb80-dd1d08f6c7b2/239698c5-f7eb-4574-8cc8-c6568f08b3a0/2a0272d6861ffbca37038e043103a444.png\u0022 style=\u0022\u0022 alt=\u0022\u0022/\u003E\u003Ch5 id=\u0022other_helpful_articles\u0022\u003EOther Helpful Articles:\u003C/h5\u003E\u003Cul\u003E\u003Cli\u003E\u003Ca href=\u0022/article/8s8nehjoy8-popups-frequently-asked-questions\u0022 target=\u0022_blank\u0022\u003EPopup Frequently Asked Questions\u003C/a\u003E\u003C/li\u003E\u003Cli\u003E\u003Ca href=\u0022https://www.dailystory.com/blog/pop-up-ads-8-tips-to-get-more-leads/\u0022\u003EPopup ads: 8 tips to get more leads\u003C/a\u003E\u003C/li\u003E\u003Cli\u003E\u003Ca href=\u0022/article/lsdsy5k183-popups-report\u0022\u003EPopup Reporting\u003C/a\u003E\u003C/li\u003E\u003C/ul\u003E","publish_status":0,"post_type":"Article","authoruid":"74ef8477-e133-4a29-be36-bcf11ed681ac","author":{"authoruid":"74ef8477-e133-4a29-be36-bcf11ed681ac"},"featured_image_updating":false,"meta_description":"Create and customize popups with DailyStory, using Canva images. Step-by-step guide for design, display, lead capture, and integration options.","display_toc":false,"has_workingcopy":false,"allow_indexing":true,"total_views":14436,"date_published":"2025-07-29T22:53:22.703","date_updated":"2025-07-29T22:53:23.377","date_created":"2025-04-24T15:02:13.747"}}}