{"id":13198,"date":"2024-08-30T07:03:30","date_gmt":"2024-08-30T07:03:30","guid":{"rendered":"https:\/\/www.picreel.com\/blog\/?p=13198"},"modified":"2025-01-28T08:33:49","modified_gmt":"2025-01-28T08:33:49","slug":"typo3-popup","status":"publish","type":"post","link":"https:\/\/www.picreel.com\/blog\/typo3-popup\/","title":{"rendered":"How to Create a Popup in Typo3?"},"content":{"rendered":"

As a robust content management system (CSM), Typo3 has been my go-to tool for quite some time. Its user-friendly interface, multiple use cases, and ample features made it an excellent choice.<\/p>\n

Similarly, popups became a significant part of my marketing and lead generation efforts, and I started exploring ways to improve them. Since Typo3 does not offer built-in extensions, I had to consider various extensions and see which served my purpose better.<\/p>\n

The two most popular methods I found were the Typo3 Popupsmart extension and specialized popup tools like\u00a0Picreel<\/a>. In this blog, I\u2019ll discuss them in detail.<\/p>\n

Here\u2019s how my Picreel popup looks like in Typo3.<\/p>\n

\"Typo3<\/p>\n

Before diving in, let\u2019s glance at the key differences between Popupsmart extension and Picreel:<\/p>\n

\n\n\n\n\n\t\n\n\t\n\t\n\t\n\t\n\t
Criteria<\/th>Typo3 Popupsmart Extension<\/th>Picreel Popup<\/th>\n<\/tr>\n<\/thead>\n
Multi-platform support<\/td>\u2705 Supports multiple platforms, making it versatile for different website environments.<\/td>\u2705 Compatible with multiple website platforms, including WordPress, Shopify, and custom-built websites, providing broader compatibility.<\/td>\n<\/tr>\n
Feature set<\/td>\u274c Basic features include AI-backed targeting and analytics, but lacks CRM integration and cart abandonment recovery.<\/td>\u2705 Rich feature set including advanced functionalities like A\/B testing, exit-intent technology, geolocation targeting, and detailed analytics.<\/td>\n<\/tr>\n
Customization options<\/td>\u274c Provides standard customization options like text, images, and basic styling.<\/td>\u2705 Extensive customization options with a drag-and-drop editor, pre-designed templates, and the ability to add custom HTML, CSS, and JavaScript for greater flexibility.<\/td>\n<\/tr>\n
Integration capabilities<\/td>\u274c Integrates with various third-party tools, but lacks the extensive CRM integration offered by Picreel.<\/td>\u2705 Seamless integration with various website platforms and CMS systems like Magento, Joomla, and more, allowing for easier management across different sites.<\/td>\n<\/tr>\n
Targeting capabilities<\/td>\u2705 Offers smart targeting, traffic source targeting, and device-based targeting.<\/td>\u2705 Advanced targeting options, including geolocation, referral source, user behavior tracking, device type, and time-based triggers, enabling highly specific audience targeting.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n<\/div>\n

I choose Picreel due to some unique advantages it offers over Popupsmart:<\/p>\n

    \n
  • Advanced Feature Set:<\/strong>\u00a0Picreel offers a more comprehensive set of features including CRM integration, cart abandonment recovery, and timed popups, which provide additional layers of functionality and customization.<\/li>\n
  • Granular Data Privacy Control:<\/strong>\u00a0Picreel’s detailed data privacy settings help ensure compliance with global standards, offering peace of mind for businesses dealing with sensitive customer information.<\/li>\n
  • Full Service Management:<\/strong>\u00a0Picreel’s full service management, which includes installation support and ongoing campaign management, is a significant advantage for businesses looking for comprehensive support.<\/li>\n<\/ul>\n

    Nonetheless, this tutorial will guide you through creating a popup using both methods.<\/p>\n

    <\/span>Method 1: Using the Typo3 Popupsmart Extension<\/span><\/h2>\n

    Here\u2019s how to set up a popup in Typo3 using the Popupsmart extension:<\/p>\n

    1.<\/strong> Register to Popupsmart and sign in to your account.<\/p>\n

    \"Register\u200d<\/p>\n

    2.<\/strong> Click the “Embed Code” part to get your unique code.<\/p>\n

    \"Embed\u200d<\/p>\n

    3.<\/strong> A modal will appear and give you your Popupsmart embed code. Copy this code to the clipboard.<\/p>\n

    \"Popupsmart\u200d<\/p>\n

    4.<\/strong> Go to your Typo3 website\u2019s admin panel, click \u201cTemplate,\u201d and select your template.<\/p>\n

    \"Typo3<\/p>\n

    5.<\/strong> Click the \u201cSetup\u201d button under the \u201cTemplate tools\u201d section.<\/p>\n

    \"Template\u200d<\/p>\n

    6.<\/strong> Paste your embed code to the setup section as shown below and click the \u201cSave\u201d button when you are finished.<\/p>\n

    \"Paste<\/p>\n

    7.<\/strong> Go to the Popupsmart dashboard and click \u201cWebsites\u201d on the profile menu.<\/p>\n

    \"Popupsmart<\/p>\n

    8.<\/strong> Click the \u201cNew Website\u201d button to add your Typo3 website.<\/p>\n

    9.<\/strong> Type your Typo3 website\u2019s URL into the \u201cAdd a new website\u201d part and save it.<\/p>\n

    \"Add\u200d<\/p>\n

    10.<\/strong> You can view your verified website on the Websites page.<\/p>\n

    \"view<\/p>\n

    11.<\/strong> Now, you can create your popup campaign quickly! Go to the dashboard and click on the \u201cNew Campaign\u201d button.<\/p>\n

    \"create<\/p>\n

    12.<\/strong> After making the necessary changes, click the \u201cSave\u201d and \u201cPublish\u201d buttons to publish your appealing popup campaign.<\/p>\n

    \"publish<\/p>\n

    <\/span>Method 2: Using Picreel Popup Builder<\/span><\/h2>\n

    Picreel is a popup maker that works across multiple platforms, providing a versatile solution for creating popups. Here’s how you can create a popup using Picreel:<\/p>\n

    1.<\/strong> Sign up for a Picreel account<\/a>\u00a0and log in.<\/p>\n

    2.<\/strong> Go to the \u201cCampaigns<\/strong>\u201d menu and click “New Campaign<\/strong>” from the top right. You can select the templates option from the drop-down or start from scratch.<\/p>\n

    \"New<\/p>\n

    3.<\/strong> From the templates menu, choose the type of popup you want to create.<\/p>\n

    \"templates<\/p>\n

    4.<\/strong> Once you select the design, customize it according to your preferences.<\/p>\n

    \"customize<\/p>\n

    5.<\/strong> Configure your targeting and trigger options to specify when and where you want your popup to appear.<\/p>\n

    \"configure\"<\/p>\n

    6.<\/strong> Click “Save<\/strong>” to activate your popup.<\/p>\n