1. Home
  2. Docs
  3. XYZ Popup
  4. User Guide
  5. Quick Bar

Quick Bar

Quick Bar is another type of popup that we can place it in a static position of the webpage.
We can place buttons, messages etc. in the quick bar.
The settings for the Quick Bar are given below.
First enter the name of the quick bar and select the display layout as “Quick Bar”
XYZ Popup-Quickbar
We can enter the quick bar content here.
XYZ Popup-Quickbox content
Show referrer messages? yes/no : To show referrer URL based messages in Quick Bar, select ‘yes’. Otherwise, select ‘No’.
Content : Enter your Quick Bar content here.
Position Settings
We can display the Quick Bar in different positions by selecting the predefined positions.
XYZ Popup-Quickbar position
We can also set the width and height of the quick bar.
Display Logic Settings
This section allows us to select the quick bar display logic.
We can display the quick bar based on delay, number of pages browsed or both.
Quick bar display logic – This is the logic, how to display the quick bar in our webpages.
There are 3 options.
1. Based on delay
XYZ Popup-Dialogbox display 1
In the “Based on delay” logic, the quick bar will appear after a delay.
You can set the time for this delay.
In the section “Delay in seconds before rendering” you can enter the delay in seconds. If it is “0(zero)” the quick bar will appear without any delay.
2. Based on number of pages browsed
XYZ Popup-Dialogbox display 2
In the “Based on number of pages browsed” logic, the quick bar will appear after the user browsing some pages entered in “Number of pages to browse before rendering“.
3. Based on both
XYZ Popup-Dialogbox display 3
In the “both” option, the quick bar will appear after a particular delay and after the user browsed some pages.
Also if the quick bar content is larger than the window, we can hide the extra content or allow a scrollbar.
You can select your option for “If content is larger than window?”
XYZ Popup-Dialogbox display 4
Target Device – You can target the quick bar in your website for users using different devices. The possible devices are desktop/laptop and mobile/tablet. You can select the target devices here.
If you have selected all devices, the quick bar will display if viewed from all these devices.
Display trigger – We can display the quick bar on loading of the page or when clicking a location/element in a page.
When we select “On Load”, the quick bar will appear when the loading of the page completed.
If the selected trigger is “On Click”, the quick bar will appear only when the user click on the page based on the trigger element.
XYZ Popup-Dialogbox display 5
There is an option Display onclick trigger method.
You can select any one of the options here, “on first click” or “on every click”.
If you select the value “on first click”, the quick bar will appear only on the first click in the element.
If the selected option is “on every click”, the quick bar will appear on every click on the element.
Trigger Element– If you leave this empty, quick bar will trigger when anyone clicks on body.
Otherwise you can specify the element which when clicked must trigger quick bar.
You can specify any of the formats given below.
tagname => eg: img
classname => eg: .myclass
id => eg: #myid
If you are using a tag name, the quick bar will triggered when the user clicked on the element with the tagname.
The same is with the class and id.
Repeat interval for a user – This is the quick bar repeat interval. If you want to display the quick bar only after 30 minutes from the first display, you can enter that value here.
If this value is 0(zero), the quick bar will appear on every trigger.
XYZ Popup-Close button
Close button option – You can display the close button with the quick bar if you are selecting the ‘yes’ option.
If you are selected the option ‘No’, it will not display a close button.
Close button Image – You can upload a close button image here.
Close button appearance position – There are 4 positions for displaying the close button.
Top right, top left, bottom right and bottom left. You can select any position from the dropdown menu.
Display as iframe – We can display the quick bar in iframe or in the same page.
If you are using the iframe, any link in the quick bar or buttons will open in the same quick bar.
To open a link in a window outside the quick bar or to use a social media button, please disable the iframe display.
Style Settings
Here we can select the style of the quick bar.
XYZ Popup-Quickbox style
Z index – Z index determines whether the quick bar display under or above the pages.
As the value of z index increases, the quick bar become on top(above) of all page contents.
Background color – We can select the Quickbar Popup content background using a color picker.
Popup Opacity (0-100) – This is the opacity level of the popup. If the value of opacity is ’0′, the popup should be a transparent one. If the value is ’100′, the popup should be opaque.
Border color – This is the color of the Quickbar Popup border.
Border width – We can set the width/thickness of the quick bar border here.
Border radius – If you want a rounded corner for the quick bar, use this option. As the radius increases, the roundness also increases. Use ’0 (zero)’ for rectangular edges.
Was this article helpful to you? Yes No