How to Add a Popup to Your Bitrix Website

Introduction

WEBSET Popup is a powerful tool for creating pop-up windows that integrates perfectly with Bitrix. It allows you to attract user attention through promotions, feedback forms, newsletter subscriptions, and other effective interactions. Thanks to its intuitive interface and flexible settings, you can add a popup widget in just a few simple steps without developer assistance.

WEBSET popup widgets work excellently in the Bitrix management system regardless of the template and edition used. You can independently set display conditions, configure timers, scroll triggers, or button click events.

Ways to Add a Popup to a Bitrix Website

You can add a popup to Bitrix in two main ways: manually create HTML/CSS/JS code or use a ready-made no-code solution. The WEBSET installation process takes no more than 5 minutes and requires no special programming knowledge.

Creating a Popup Manually with HTML/CSS/JavaScript

The traditional method for those who have programming skills and are ready to spend time developing their own solution.

Step 1. Create HTML Markup

You need to create the popup window structure with overlay, content, and close button:

<div id="popup-overlay" class="popup-overlay">
  <div class="popup-container">
    <button class="popup-close">×</button>
    <h2>Special Offer!</h2>
    <p>20% off your first order</p>
    <button class="popup-btn">Get Discount</button>
  </div>
</div>

Step 2. Write CSS Styles

Create styles for positioning, animation, and responsiveness:

.popup-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.7);
  z-index: 9999;
}
.popup-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  padding: 30px;
  border-radius: 8px;
  max-width: 500px;
}
/* ... and many more styles */

Step 3. Program Logic with JavaScript

Write code to manage display, hiding, triggers, and cookies:

// Show on timer
setTimeout(function() {
  if (!getCookie("popup_shown")) {
    document.getElementById("popup-overlay").style.display = "block";
  }
}, 3000);

// Close popup
document.querySelector(".popup-close").addEventListener("click", function() {
  document.getElementById("popup-overlay").style.display = "none";
  setCookie("popup_shown", "1", 7);
});

// Exit intent
document.addEventListener("mouseout", function(e) {
  if (e.clientY < 0) {
    // show popup
  }
});
/* ... and much more code for different scenarios */

Step 4. Integration into Bitrix

  • Go to Admin Section → Settings → Product Settings → Sites → Site Templates
  • Select the template in use and click "Edit"
  • In header.php file, add CSS to the <head> section
  • In footer.php file, add HTML markup and JavaScript before </body>
  • Test on different devices and browsers
  • Fix bugs and improve responsiveness

Step 5. Testing and Refinement

Test the popup in various scenarios: mobile devices, different browsers, conflicts with other scripts. Creating a quality popup manually typically takes 4-8 hours of work.

  • ✅ Advantages: full control over code; independent from external services; can be customized for any requirements.
  • ❌ Disadvantages: requires HTML, CSS, and JavaScript knowledge; time-consuming development and testing; difficult to add new popups; no built-in analytics; manual cross-browser compatibility and responsiveness required; any changes require code editing.

Adding via WEBSET No-Code Platform

A fast and convenient way to connect popups through automatic synchronization from a single control panel — without writing code.

Step 1. Registration and Account Setup

  • Register on WEBSET and create a new organization
  • Select "Add Website" and specify your Bitrix site address
  • Add the site domain to project settings

Step 2. Create and Configure Popup

  • Choose a suitable template (discount, hint, contact collection form)
  • Configure content, design, buttons, and functionality in the visual editor
  • Set display conditions: by time, on page exit attempt, on reaching a certain scroll, or on element click
popup widget for Bitrix popup form widget for Bitrix

Step 3. Install Script in Bitrix

Get the connection script from the "Connection" section in your WEBSET personal account.

Method 1: Via Template Files

  • Go to Admin Section → Content → Files and Folders → bitrix → templates → your_template_name
  • Open header.php for editing
  • Find the <?$APPLICATION->ShowHead()?> call and insert the script before it in the <head> section

Method 2: Via Site Settings (if available)

  • In the admin panel, find the site settings
  • Find the section for adding additional HTML code to HEAD
  • Insert the obtained script and save settings

Step 4. Done!

The popup will automatically appear on your website. The entire process takes 3-5 minutes. At any time, you can access your WEBSET account and change the design, text, or display conditions without editing the site code.

  • ✅ Advantages: no programming skills required; setup in 3-5 minutes; visual editor with ready-made templates; centralized management of all popups; built-in analytics and A/B testing; automatic responsiveness for all devices; quick changes without code editing; user segmentation support; ready-made display triggers.
  • ❌ Disadvantages: requires access to site settings or template for one-time script installation; paid plan needed for advanced features.

Now you can effectively use WEBSET popups on your Bitrix website. Create a widget in your personal account → configure display conditions → publish → the widget will automatically appear on your website 🚀

Summary

Adding a popup to a Bitrix site is possible in two ways: manual creation with HTML/CSS/JavaScript (takes 4-8 hours, requires programming skills) or using WEBSET (setup in 3-5 minutes without code). WEBSET offers ready-made templates, a visual editor, built-in analytics, and the ability to quickly change popups without editing site code.

Popups help collect more leads, inform about promotions, and retain user attention. The WEBSET widget is fully compatible with all Bitrix editions and does not conflict with installed modules or system components.

Frequently Asked Questions (FAQ)

  • What is a popup and why is it needed?
    A popup is a window that helps convey important information to users, offer discounts, collect contact data, or notify about special offers. In Bitrix, it is effectively used to increase conversion.
  • How long does it take to create a popup manually?
    Developing a quality popup from scratch (HTML, CSS, JavaScript) typically takes 4-8 hours of work, including responsiveness and testing. With WEBSET — 3-5 minutes.
  • Do I need programming skills to use WEBSET?
    No, the WEBSET platform does not require programming knowledge. The visual editor allows you to create and configure popups with a mouse, without writing code.
  • Is WEBSET compatible with various Bitrix templates?
    Yes, popup widgets work with any templates and editions of Bitrix, including custom solutions. The system automatically adapts to the site structure.
  • Is it suitable for Bitrix multi-site setups?
    If your Bitrix uses multiple sites, you need to add the widget code to each site template separately or use a unified script through the no-code platform.
  • Do I need to install additional modules?
    No, WEBSET popups do not require installing additional modules in Bitrix. Simply insert the installation code into the site template once.
← Back to all articles