How to Embed a Woorise Page in your Website

Once you create your page, it’s time to share it with your audience. Woorise provides a variety of ways to embed or share your page across different platforms. While keeping the campaign on the Woorise landing page is the quickest and simplest option, Woorise also includes several flexible options for embedding your campaign in a format that best suits your needs — including the option to embed your form in an email.

If you’re using a popular content management system (CMS) such as WordPress, Shopify, Squarespace, or Webflow, Woorise makes it simple to embed your campaign directly into your site. Each platform includes a dedicated step-by-step guide that explains how to add and display your Woorise campaign seamlessly within your pages.

Create an embed

Woorise allows you to create multiple embeds with different embed types and designs for the same campaign and embed them in multiple locations. For example, you can create an embed code with the Popup embed type for your ecommerce store and then create a new embed code with the Standard embed type for your landing page.

1. By default an embed is created for you. If you need to create a new one you can click the Add Embed button.
2. In the right column you can choose the embed type and configure the design options for the selected embed. You can also rename the embed by clinking the embed title on the top.
3. When you are happy with your settings you can copy the embed code and paste it in your webpage where you want the page to appear, ideally using an HTML or code element or block.

Embed settings

When you have embedded the code in your webpage, all the settings — including embed types — are updated live without the need to replace the embed code again. Woorise currently provides seven different embed types, each with its own unique settings and behavior.

Embed type

• Standard: A standard embedded page will load on your website wherever you decide to place it.
• Popup: A popup embedded page will load in the middle of the webpage in different sizes and can be triggered by various events.
• Full page: There are no settings for full-page embedding. It’s recommended to embed it in a clean page with no other content.
• Slider: The page will launch by sliding in from the right or the left, depending on the settings. You can also set different sizes with medium and small size to be displayed as boxed and large size in full height.
• Popover: The page will launch when clicking the popover button that appears in the right or left corner, depending on the settings. You can also use any of the launch options to make the popover show up automatically.
• Side tab: A fixed, discreet tab on the side of the screen that expands when clicked, revealing your page. Ideal for engaging visitors without disrupting their browsing experience. The page will launch when clicking the side tab button that appears in the right or left side of the screen, depending on the settings.
• Bar: A slim, attention-grabbing bar that appears at the top or bottom of your website. It’s perfect for quick announcements, promotions, or calls to action. You can customize its position, size, and behavior to stay fixed or appear based on user interactions such as scrolling or delay triggers.

Height

The Height setting applies only to the Standard embed type and allows you to control the vertical size of the embedded campaign, ensuring it fits perfectly within your page layout.

• Auto: The height of the embedded page will be calculated automatically.
• Fixed: Allows you to set a fixed height for the embed. You can define a fixed height in pixels or use a percentage number. Using a percentage, the height will be calculated based on the size of the viewport.

Size

The size setting controls how large the embedded campaign appears on your page. Available for popup and slider embed types, you can choose between small, medium, large, or full screen (popup only) to best fit your layout and design.

Position

The position setting defines where the embedded campaign appears on your page. It’s available for slider, popover, and side tab embed types with options for right or left placement, and for the bar embed type with options for top or bottom placement.

Button Color

The button color setting lets you customize the appearance of the trigger button for popover and side tab embed types, allowing it to match your website’s branding or stand out to attract attention.

Button Text

The button text setting allows you to customize the label displayed on the side tab button, helping you create a clear and engaging call to action for visitors.

Sticky

The sticky setting keeps the bar embed fixed at the top or bottom of the page as users scroll, ensuring your message or call to action remains visible at all times.

Remove close button

The remove close button setting makes the bar embed always visible, preventing users from closing it manually.

Launch

• On page load: The embed will launch immediately when the webpage is loaded.
• On exit: The embed will launch when someone tries to exit the browser window. This option won’t work on mobile devices or when using a keyboard to exit the browser as there isn’t a way to detect mouse movement. In that case the launch fallbacks to scroll at 60% on touch devices.
• After scroll: The embed will trigger once the user scrolls through a specific percentage of the page. You can select from 30%, 60%, or 90% scroll completion. If the page isn’t scrollable, the embed will automatically display after 3 seconds.
• After a set time: The embed will launch after a set time in seconds.
• Custom: If you choose this option, the embed will not launch automatically. You can manually open the embed by setting the w-open class in a link or a button.

Frequency

The frequency setting controls how often the embedded campaign appears to the same visitor. Available for popup, slider, and bar embed types.

• Every visit: Displays the campaign each time the visitor loads the page.
• Once per session: Shows the campaign once per browser session.
• Once per day: Displays the campaign once every 24 hours.
• Only once: Shows the campaign a single time per visitor.
• Custom: Lets you specify a custom time interval (in minutes) before the campaign is shown again.

Embedded URL

The Embedded URL option is optional and available for all embed types. It allows you to specify the full URL of the page on your website where the campaign is embedded. When set, shared links—such as those from the Viral Share feature—will direct users to your website instead of the Woorise landing page.

Advanced Settings

In this section we are providing some advanced settings and customization options for the Woorise embeds.

Add a loader

With a small tweak in the embed code you can add an animated pre-loader while the Woorise landing page is loading. This provides a better user experience especially for the Standard embed type.

To add the loader edit the embed code and add the data-wr-loader parameter as in the following example:

<div data-wr-embed="ABCDE" data-wr-loader></div><script src="https://woorise.com/e.js"></script>

Automatically scroll to the top

When dealing with multi-page forms that include lengthy questions, it’s often helpful to ensure users automatically scroll to the top after clicking the “Next” button. You can achieve this by adding the data-wr-scrolltop parameter to the embedded code, as shown in the example below.

<div data-wr-embed="ABCDE" data-wr-scrolltop></div><script src="https://woorise.com/e.js"></script>

Lazy load to improve performance

Enable lazy loading for the embedded Woorise iframe to improve page speed and performance. This is especially useful when the iframe is placed below the initial viewport (not visible when the page loads). It ensures the iframe loads only when it comes into view, reducing unnecessary resource usage and improving page load time. To enable lazy loading add the data-wr-lazy parameter to the embedded code as shown in the example.

<div data-wr-embed="ABCDE" data-wr-lazy></div><script src="https://woorise.com/e.js"></script>

Embed manually using an iframe

If for any reason the embedded code doesn’t work on your platform or you can’t add scripts, you can embed the page using an iframe as in the following example.

Simply replace the src with your page’s URL. You can also adjust the height in the code to match the height of your Woorise page.

<iframe src="https://woorise.com/sitename/page" style="border:none;width:100%;height:800px;"></iframe>

If you choose to embed your page manually, some features like auto-height adjustment and updating embed settings from your Woorise dashboard won’t be available.

Inline configuration

Use the data-wr-config attribute to pass a JSON config directly on the embed element. This is the fastest method because it bypasses the API fetch and renders immediately. You can control any setting locally per embed (different pages/blocks can have different configs) and you can also generate or modify the JSON dynamically (e.g., server-side or via JS before e.js runs).

Inline configuration takes priority and renders without waiting for the network. You can define any option shown in the table—such as type, size, position, launch/frequency rules, or colors—and fully customize how your embed behaves. To adapt the behavior for different pages or segments, simply output a different JSON configuration for each embed instance directly from your template or block.

<div
  data-wr-embed="ABC123456"
  data-wr-config='{
    "id": "ABC123456",
    "type": "popup",
    "url": "https://woorise.com/site/page",
    "launch": "scroll",
    "scroll": 60,
    "size": "large",
    "frequency": "once_per_session"
  }'>
</div>

<script src="https://woorise.com/e.js"></script>

Key	Values	Types	Default	Notes
id	string (unique)	standard, popup, fullpage, slider, popover, sidetab, bar	—	The Embed ID, a unique identifier for the embed.
type	standard, popup, fullpage, slider, popover, sidetab, bar	standard, popup, fullpage, slider, popover, sidetab, bar	standard	Defines the embed type that determines how the page is displayed.
url	absolute URL	standard, popup, fullpage, slider, popover, sidetab, bar	—	The full page URL to load inside the iframe.
launch	load, exit, scroll, time, custom	popup, slider, popover, sidetab, bar	load	Controls when the embed opens.
scroll	number (percent)	popup, slider, popover, sidetab, bar	60	Used when launch is set to scroll.
time	number (seconds)	popup, slider, popover, sidetab, bar	2	Used when launch is set to time.
frequency	every_visit, once_per_session, once_per_day, once, custom	popup, slider, bar	every_visit	Defines how often an embed appears to the same visitor. custom can be paired with frequency_duration to specify a custom duration in minutes.
frequency_duration	number (minutes)	popup, slider, bar	0	Used when frequency is set to custom. Specifies the time interval in minutes before showing the embed again.
height_mode	auto, fixed	standard	auto	Determines how the height is handled. auto adjusts automatically based on content. fixed allows setting a specific height using height and height_unit.
height	number	standard	—	Specifies the height value when height_mode is set to fixed.
height_unit	pixel, percentage	standard	pixel	Defines the unit for fixed height. Pixel sets an absolute height in pixels; percentage uses viewport height (vh).
size	small, medium, large, fullscreen	popup, slider	large	Controls the size of popup and slider embeds. fullscreen is available only for popups.
position	left, right, top, bottom	slider, popover, sidetab, bar	varies by type	Defines where the embed appears. Sliders, popovers, and sidetabs support left or right. Bars support top or bottom.
color	hex color	popover, sidetab	#ff4a00	Sets the background color of the trigger button for popover and sidetab embeds.
text_color	hex color	popover, sidetab	#ffffff	Sets the text or icon color of the trigger button for popover and sidetab embeds.
label	string	sidetab	Click me	Defines the text label displayed on the side tab button.
sticky	true, false	bar	false	Keeps the bar embed fixed at the top or bottom of the page when scrolling.
remove_close	true, false	bar	false	Removes the close button, keeping the bar always visible without user dismissal.
version	number	standard, popup, fullpage, slider, popover, sidetab, bar	—	Optional cache-busting version value automatically handled by the platform.
conversational_form	true, false	standard	false	Whether is a conversation form or not.