Digioh’s JQuery Selector Generator: The Visual Way to Personalize your Website

Personalized content boosts engagement and conversions. With Digioh, you can use embedded inline forms to add text, images, HTML, or dynamic content anywhere. Until recently, you had to know something about jQuery, but now we’ve released a new feature that makes it possible to personalize your website visually.

All you have to do is load the JQuery Selector generator, and you’ll be able to click anywhere to find just the right positioning for your embedded inline form.

Here’s a quick video overview, and below are the step-by-step instructions on how to use this powerful new feature.

Step 1: Create a widget; make sure that it’s the “Inline” widget type. Choose position using “JQuery Selector”.

Step 2: Load the JQuery Selector Generator. There are two ways you can do this:

  1. Open up the page where you’d like to insert the inline form, and add the following url parameter: ?lightbox-jquery-selector-generator
  2. Run the following command in the console (paste into the console and hit enter):  DIGIOH_API.LIGHTBOX.runJquerySelectorGenerator();

Step 3: Click anywhere on the page and a window will appear with two fields:

  1. Top field: for positioning your widget. Copy this and paste into JQuery selector field  (step 4)
  2. Bottom field: for targeting (when certain text appears within the selected element). This will only display the widget when the selected words (e.g. “Contact”) are within the selected element. This is copied into Digioh’s conditions editor (step 5)

Step 4: Copy the positioning jQuery selector into the “jQuery selector field”. Save and publish, and reload the page to visualize.

Step 5: Copy the targeting information into the Digioh conditions editor.

Step 6: If you want to test positioning before publishing, click on the “Need selector help? Click here” and a window will open up where you can click around to try different positioning options.