This website works best with JavaScript enabled. Learn how to enable JavaScript.

How to Apply Changes to Pop-Ups or Sliders

Last updated

If you are using pop-ups on your website, these may be triggered through one of the two instances:

  • When a user lands on your website
  • When some specific user-generated event takes place (say, user clicks on the close button)

If the pop-up appears for all users who land on your website, you can make and apply changes to the pop-up directly from the VWO editor. But if the pop-up is triggered only by a specific user action, it won’t appear when you load the page in the VWO editor. In such a case, to make and apply changes to the pop-up, you need to perform the following actions:

  1. To load the pop-up in the VWO editor, use the Navigate mode. If the pop-up is implemented using an iframe, load the iframe source URL in the editor.
  2. Apply the editor operations.
  3. Verify the changes in live previews. If the changes do not get applied, add the setInterval() function, as shown here.

Alternatively, you can directly add the custom JS code in the code editor window. Always follow the best practices with custom JS code.

Applying Changes to Sliders

To apply changes to image sliders, for example, replacing any specific image in the carousel or replacing the carousel itself with a static image, you can add the custom JS code in the code editor window.

Use the CSS selector for that particular image/carousel element that you want to change and apply change through JS.

pop

ATTENTION Do not apply Edit HTML on pop-ups or sliders as a whole, because it may break their dynamic nature. You can apply it to the smaller, static elements. For example, text added to the top of slider can be modified using Edit HTML.

 

Was this article helpful?

Thanks for your feedback!
Please email us at support@vwo.com to tell us what you were looking for. We'll send the answer to your inbox.

Contact Us / Login