qReveal Premium users can include limited HTML and CSS in the "long description" field of an item, "Help/Order" field of a location and the disclaimer field
- To use this feature, first make sure you are a premium subscriber (attempting to write HTML in this field as a free user will cause you to lose the HTML code).
- Then, click Items in the admin navigation.
- Find the item you want to edit add HTML to.
- Click the Edit button.
- Look for the "Long description" field.
- Modify the content of the field to include the HTML you want to use (subject to the limitations listed below).
- Don't forget to click the Save button to save your work and make it active.
- After saving, we recommend previewing and testing your item to ensure the HTML is working as you'd like.
The long description field is ONLY displayed when the user taps the View button or item name on a category page. It does NOT display in the short line of text under the item name.
Learn more about HTML and CSS as well as how to define colors.
HTML and CSS not permitted
For security and performance reasons, only select HTML and CSS is permitted.
The following is list of the most commonly used tags that are NOT permitted:
<script>or<noscript><iframe>or<frameset>or<frame><link>(not to be confused with<a>, which is allowed; see below for details)<style><head><body><nav><footer><button><form><input>and related form tags, including<select><option>or<submit><h1>through<h5>(but<h6>is allowed; see below for details)
Most basic CSS attributes are permitted using inline styling within the style= HTML attribute. See below for details.
Because only inline CSS can be used, features such as @import or @media media queries (for responsive behavior) are NOT available. Here is a list of other common CSS that CANNOT be used:
!importantdisplay:overflow:position:content:flexbox:direction:float:background-image:(thoughbackground-color:IS permitted)background-position:background-repeat::hover:after:before:visited:active
Keep in mind the goal of the long description field is to allow your customers to view additional text and content in a "rich content" approach, but this field is NOT designed to be used to override the default CSS or other design elements or create large, complex, custom designs.
Of course, always remember to separate CSS declarations with a semicolon (;) and to close all HTML tags that require it (the notable exceptions are <img> and <br>). This is especially important with <div> and <span> because these can affect the layout of the rest of the page.
For highly technical people, all code must conform to XHTML 1.0 Strict.
HTML tags permitted
Below is a list of the HTML tags we permit in this field and the attributes of each that are permitted. If they are not listed here, they are not supported.
<a>and</a>(all anchor tags in the long description field automatically gettarget="_blank" rel="noopener noreferrer nofollow"applied to them so links will open in a new tab or window without security risks and this code cannot be removed). All links created by<a>tags must open in a new window or tab with a "nofollow" directive.href=style=title=<strong>and</strong><em>and</em><p>and</p><div>and</div>style=<span>and</span>style=<img>and<img />(</img>is NOT valid)src=alt=width=height=<h6>and</h6>(see note below about heading tags)style=<ol>and</ol><ul>and</ul><li>and</li>style=<br>and<br />(</br>is NOT valid)
Heading tags
In order to maintain structured code, only <h6> is available in the long description field. Headings <h1> through <h5> are used elsewhere on the page for specific purposes.
CSS attributes permitted
The following CSS attributes are permitted inside of the style HTML attribute. Keep in mind you must use inline styling and not all of the tags below apply to all HTML elements (for example, <span> tags cannot have width: or height: because it is not a block element).
font:(shorthand permitted)font-size:font-weight:font-style:font-family:text-decoration:padding:(shorthand permitted)padding-top:padding-right:padding-bottom:padding-left:margin:(shorthand permitted)margin-top:margin-right:margin-bottom:margin-left:background-color:text-align:border:(shorthand permitted)border-top:border-right:border-bottom:border-left:border-width:border-color:border-style:border-radius:height:width:(in order to support mobile devices, our code will attempt to forcmax-width:100%to all elements in this long description field, but you may need to test to make sure your code does not break the layout)
Useful code examples
Below are code samples that can be used to create commonly needed elements within your long description.
- In these examples, code that you can (and most likely will want to) change is surrounded by double curly braces like this
{{Change me}}. Do NOT leave the{{or}}in the code or it will not work. - The code examples below also use the notation
{{N}}to show where you should insert a numerical of your choice. We use pixels (px) by default in these examples, but you can use other units as needed. - Likewise,
{{HEX}}is used to illustrate where you can enter a HEX color code or standard name. You can also use the RGB color declaration format here (just remember to remove the#). Learn how to define colors. - We highly recommend using
https://before any image source code to avoid "mixed content" warnings. - It is also highly recommended to use URLs that start with
https://for anyhref=values, assuming the page is available at that address (we recommend testing to be sure). - For clarity and readbility, we include spaces in our inline CSS exmaples (particularly after
:and;) below but when you save an item, extra spaces are removed automatically.
Create a clickable link
<a href="{{FULL_URL_HERE}}" title="{{Describe the link here}}">{{Enter the text you'd like to be clickable here}}</a>
To force an underline use this code:
<a href="{{FULL_URL_HERE}}" title="{{Describe the link here}}" style="text-decoration: underline;">{{Enter the text you'd like to be clickable here}}</a>
To force the link not to have an underline use this code:
<a href="{{FULL_URL_HERE}}" title="{{Describe the link here}}" style="text-decoration: none;">{{Enter the text you'd like to be clickable here}}</a>
Make a link look like a button
<a href="{{YOUR_URL_HERE}}" title="{{Describe the link here}}" style="padding: {{N}}px {{N}}px; background: #{{HEX}}; color: #{{HEX}}; text-decoration: {{none}}; border-radius: {{N}}px;" >{{ENTER YOUR LINK TEXT HERE}}</a>
border-radius: {{N}}px; gives your button rounded corners. Remove entirely for 90-degree corners.
Image
<img src="https://{{FULL_PATH_TO_IMAGE_FILE}}" alt="{{Describe the image here}}" width="{{N}}" height="{{N}}" />
To make an image a link:
<a href="{{YOUR_URL_HERE}}" title="{{Describe the link here}}"><img src="https://{{FULL_PATH_TO_IMAGE_FILE}}" alt="{{Describe the image here}}" /></a>
Box
<div style="border-width: {{N}}px; border-style: {{solid}}; border-color: #{{HEX}}; padding: {{N}}px; ">{{Type the box content here}}</div>
A good starting point for border-width: is 1px. A good padding value to start out with is 20px. border-style: can be changed to a variety of settings but solid is the default and will work for most uses.
Change text color
For paragraphs:
<p style="color: #{{HEX}}">Type paragraph text here.</p>
For one word:
<p>Type paragraph text here <span style="color: #{{HEX}}">and the text you want to change color here</span>.</p>
Add bold or italics
<strong>This text will be bold</strong>
<em>This text will be italic</em>
Note that <b> and </b> are not supported and <i> and </i> are used to generate icons, not italics.
Common uses of HTML and CSS in the long description
- Add a link to a booking, reservation or appointment tool so customers can sign up, register or make an appointment or reservation with you.
- Link to a contact form, survey or other form to collect more information from potential customers about what they are looking for.
- Link to social media, photo galleries and other ancilarlly content to engage visitors
- Link to your social media profiles to encourage users to follow you for updates and more
- Send users to a standalone email sign up form to join your email newsletter or offer mailing list
- Link users to latest hours or other information about your business
- Encourage users to review you on popular social sites
- In general, sending users to a landing page or webiste that doesn't have a clear call to action is not advised nor effective
Links in long descriptions affect on SEO
To prevent SEO spamming abuse, we also add rel="nofollow" (along with noopener noreferrer) to all <a> tags in long descriptions. While different search engines detect and handle this tag differently, in general, it is not an reliable way to build a legitimate backlink profile. In some cases, having too many inbound links pointing to your domain or URL(s) may also penalize your search engine optimization.
While this many seem counterproductive in some ways, most of the legitimate reasons for including a link in your long description are to send customers elsewhere to take a specific action, not just send them to your website or landing page in attempt to boost your search rankings, so adding the "nofollow" directive is appropriate.
We also strongly recommend avoiding any "keyword stuffing" of the text between <a> and </a> tags as this can have a detrimental affect on SEO. Instead, be sure to make the text between these tags description clear enough so that the user knows what clicking the link will show them without adding too many keywords in it (these will likely have little to no affect). Excessive keyword stuffing along with our "nofollow" directive may have negative affects on your SEO.
If we detect accounts that appear to exist solely as an attempt to create backlinks, they will be deleted without notice.
Please note that some search engines will still follow links with the rel="nofollow" tag but not count it as a backlink. Instead, this is generally done as a way to help the search engine discover more of the web and it may index and follow those pages, depending on a variety of factors, without the benefit of a backlink.
We do not support rel="sponsored" or rel="ugc" tags either at this time.
qReveal is not meant has a search engine optimization tool and we are unable to provide SEO guidances, tips or troubleshooting.