HTML, text formatting, and template variables

There are several description fields within the NamePros Parking dashboard that support HTML, text formatting, and template variables (also called variable text). This guide calls them "HTML enabled". Understanding how to use these fields will greatly increase the customization options you have for your landers.

Short on time? Choose from existing templates that others have created. We encourage you to share your own templates, too.

What does "HTML enabled" mean?

This label simply means that you can use HTML syntax within the field. This lets you format the content of that field to your liking, such as making it bold, underlining it, or even adding lists, headings, and more!

A course on HTML goes beyond the scope of this guide, but here is a brief introduction.

HTML is made of "tags", similar to the BBCodes you may know from the text editor you use for posts on NamePros. Each tag results in a different display on your lander. For example, the <b> tag makes text bold. Generally, each tag begins with an opening tag (<b>) and ends with a closing tag (</b>). Any content inside the tag (<b>Tag content!</b>) receives the effect of the tag. In this case, the display is "Tag content!", because we used the <b> tag.

For security, and to make sure landers look right, we only allow a small set of HTML tags in the description fields. See below for which tags are allowed where. Most tags accept no attributes; the ones that do are noted next to the tag. Tags and attributes that are not allowed are removed from the HTML that appears on your landers.

Where can I use HTML?

There are four HTML enabled fields. The "Short description" and "Expanded description" are under "Descriptions" in your Content settings and in each domain's content settings. The seller "Description" is in your Profile settings and applies to your whole account. The "Description" in your portfolio settings is the fourth: it accepts the same tags as the Expanded description, but template variables such as {domain} do not work there, because a portfolio is not tied to one domain. Each field has its own requirements, which we cover below.

The following tags can be used in any HTML enabled field:

* Appearance may vary.

Link support

As shown above, you can use links in any HTML enabled option. Keep these things in mind:

• Web links always use HTTPS: http:// becomes https://, so make sure the page you link to supports HTTPS. Links that use any other protocol are removed, except mailto:, tel: and sms: links.
• If a link is not valid or not supported, the link tag (<a>) does not appear on your lander.
• Links to fragments (#fragment) are supported.
  • You can use them to send visitors to a particular part of your descriptions: Learn more.
  • The expanded description can be linked to with the fragment #description. Example: <a href="#description">See description</a>
  • mailto: links are supported. Example: <a href="mailto:[email protected]?subject={domain}">Email us!</a>

See the notes below about headings in the expanded description to learn how to add your own fragments.

Short description and Seller description

The short description option adds a small amount of text below the domain name heading, inside the main domain name display. This field cannot use any additional HTML tags and has a maximum length of 150 characters (HTML tags do not count toward this limit). It supports template variables only inside links, because outside links they could make the description too long.

The seller description appears under your seller card on landing pages. It accepts the short description's tags plus <p>, <img> and the alignment tags, up to 550 characters (tags do not count). Template variables work only inside links.

The display above comes from this HTML:

Example short description with <i>simple</i> <b>formatting</b> <u>options</u>!

Expanded description (long description)

The expanded description option shows a large amount of text in its own description area, below the main domain display.

This field allows these additional HTML tags:

• <h1>Large heading</h1>
• <h2>Smaller heading</h2>
• <h3>Smallest heading</h3>
• <p>Paragraph</p>
• <hr /> (horizontal line)
• <ol><li>Ordered list</li></ol>
• <ul><li>Unordered list</li></ul>
• <li>List item</li> (only inside an ordered or unordered list)
• <img src="https://link-to-your-image" /> (see the notes below)
• <faq question="Is this an example question?">Yes! (This is an example answer.)</faq> (adds your own Frequently Asked Question)
• <block>Display text in a styled block</block> (see the notes below)
• <columns><column>Side by side content</column></columns> (see the notes below)
• <align-center>Center-aligned text and inline images</align-center> (or <center>)
• <align-right>Right-aligned text and inline images</align-right> (or <right>)
• <align-left>Left-aligned text and inline images</align-left> (or <left>)

Note: Each alignment tag also answers to a shorter name: <center>, <left>, and <right>. For example, <center>Example Text</center> gives the same result as <align-center>Example Text</align-center>. Close each tag with the same name you opened it with. Images accept the short names too: display="right" works the same as display="align-right".

The expanded description also supports template variables. Each variable is written as {variable}.

These variables can be used:

• {domain}: the domain name, with the capitalization you set for it.
• {website}: the "Website" in your profile settings; without one, your NamePros profile, or your portfolio when you choose to use it.
• {domainUppercase}: the visited domain in all uppercase (e.g., EXAMPLE.COM for Example.Com).
• {domainLowercase}: the visited domain in all lowercase (e.g., example.com for Example.Com).
• {domainTLD}: the extension of the visited domain (e.g., "Com" for Example.Com).
• {domainTLDUppercase}: the extension of the visited domain in uppercase (e.g., "COM" for Example.Com).
• {domainTLDLowercase}: the extension of the visited domain in lowercase (e.g., "com" for Example.Com).
• {domainTLDLength}: the length of the extension (e.g., 3 for Example.Com).
• {domainLength}: the length of the visited domain (e.g., 11 for Example.Com).
• {domainLengthWithoutTLD}: the length of the visited domain without its extension (e.g., 7 for Example.Com).
• {domainWithoutTLD}: the visited domain without its extension (e.g., "Example" for Example.Com).
• {domainWithoutTLDUppercase}: the visited domain without its extension, in uppercase (e.g., "EXAMPLE" for Example.Com).
• {domainWithoutTLDLowercase}: the visited domain without its extension, in lowercase (e.g., "example" for Example.Com).

This is useful if you set one description in your account profile but want it personalized for each domain. We will add more variables in the future.

Display each line separately and keep text spacing

The expanded description has an extra option, "Display each line separately and keep text spacing". It helps if you do not want to structure your text with the tags above. When it is on, we add HTML tags that match the plain text structure you wrote. It is on by default, but we highly recommend turning it off if you are familiar with HTML, because it may give an unexpected display.

Custom fragments for headings

<h1>, <h2>, and <h3> accept an id attribute, so you can create your own fragments and link to them.

<h1 id="heading">
    Example heading
</h1>

<a href="#heading">Link to example heading</a>

You can have several fragments on the same page, but each ID needs a unique name. Use any name you like except "description", because the page already uses it for the "Expanded description" area.

Important: See the notes on link support.

Add images to your landers

First, upload each image to a website that gives you a URL for it, such as:

• NamePros Parking: add images to your account settings or to specific domains.
• NamePros Forums: attach images to a public thread or post on NamePros.
  1. Important: Copy and use the correct image address, which includes namepros.com: https://www.namepros.com/attachments/...
  2. Do not use the address that includes nameproscdn.com, because it expires. Note: This address appears in your browser's address bar after you visit the correct address in step 1.
• Other image hosts include:
  • Postimage (copy "Direct link") [Recommended]
  • ImgBB (select "HTML full linked", then remove the <a ...> tags)
  • Freeimage.host (select "HTML full linked", then remove the <a ...> tags)
  • Imgur (right-click the image, then "Copy Image Address")

Then paste the URL of each image into its own <img src="url-of-image-here" /> tag. For example, to show two images one after the other:

<img src="url-of-image-1" />
<img src="url-of-image-2" />

<img /> tags show images on your landers. Keep these things in mind:

• Describe the image in the alt attribute: <img src="..." alt="Photograph of puppy" />
• Images have a default style that adds a border, rounds the corners, and adds a slight shadow. Turn it off with the unstyle attribute: <img src="..." unstyle />
• Images show at most 600px tall. They can take the full width of the description area.
• The image source (the src attribute) must load over https. Other URLs are converted to https automatically, which may stop your image from loading if its host does not support https.
• Set the image width in pixels with the width attribute. Example: <img src="..." width="50" /> shows an image 50px wide. Images are never made wider than the space available.

Images also have a display attribute that changes how they are shown. display="align-center" is the default. Example: <img src="..." display="align-right" />

<block> tag

The custom <block> tag wraps content in a visual block, to make it stand out.

<block>This is text wrapped in a default block</block>

Blocks come in several themes. The default changes with the theme hue you selected. There are three more themes for the type attribute: green, yellow, and red. Use these colors for anything, such as green for bonuses, yellow for cautions, and red for important text.

<block type="green">This is text wrapped in a green block</block>

Each theme also answers to a name that describes its purpose, if you prefer that to a color: success for green, warn for yellow, and error for red. Both names give the same block.

<columns> tag

Your content normally fills the width of the description area, one line at a time. The <columns> tag places content side by side instead. It suits a pitch next to a summary, or a set of short points that would otherwise run down the page.

Each column goes inside its own <column> tag, and the whole row goes inside <columns>.

<columns>
    <column>
        <h3>The pitch</h3>
        <p>This column carries the story, in as much detail as you like.</p>
    </column>
    <column>
        <h3>At a glance</h3>
        <ul>
            <li>8 letters</li>
            <li>One word</li>
            <li>Registered 2009</li>
        </ul>
    </column>
</columns>

Keep these things in mind:

• Columns share the row evenly. To give one column a larger share, use the width attribute with a whole number from 1 to 6: a column set to width="3" beside a column set to width="1" takes the larger share. Every column keeps a minimum width first, so the numbers divide the space beyond that minimum. Values outside 1 to 6 are brought back into range.
• Columns wrap onto the next line when the screen is too narrow, so a row becomes a stack on phones without any work from you. To keep them on one line, use <columns wrap="no">, and they shrink instead of wrapping.
• Only <column> tags can sit directly inside <columns>. Anything else placed there, such as a stray sentence or a heading, is removed. Put all of your content inside a column.
• A <column> used on its own, outside a <columns> row, shows its content as usual.
• Columns can hold the same tags as the rest of the expanded description, including headings, lists, images, and blocks.

Note: Columns work in your portfolio "Description" too. It is a good place for them, because that page is wider than a lander.

The display above comes from this HTML ("Display each line separately and keep text spacing" is off):

<h1>Ait enim se, si uratur, Quam hoc suave! dicturum.</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <i>Quo igitur, inquit, modo?</i> Ille enim occurrentia nescio quae comminiscebatur; Summae mihi videtur inscitiae. Duo Reges: constructio interrete. </p>

<ol>
    <li>Non quam nostram quidem, inquit Pomponius iocans;</li>
    <li>Si longus, levis dictata sunt.</li>
    <li>Utrum igitur tibi litteram videor an totas paginas commovere?</li>
    <li>Nec enim, omnes avaritias si aeque avaritias esse dixerimus, sequetur ut etiam aequas esse dicamus.</li>
</ol>

<h2>Si longus, levis dictata sunt.</h2>

<ul>
    <li>Ego quoque, inquit, didicerim libentius si quid attuleris, quam te reprehenderim.</li>
    <li>Iam enim adesse poterit.</li>
    <li>Qua ex cognitione facilior facta est investigatio rerum occultissimarum.</li>
    <li>Qui autem de summo bono dissentit de tota philosophiae ratione dissentit.</li>
</ul>

<p>Inquit, dasne adolescenti veniam? A mene tu? <b>Quae cum magnifice primo dici viderentur, considerata minus probabantur.</b> Quid autem habent admirationis, cum prope accesseris? Hic nihil fuit, quod quaereremus. Inde igitur, inquit, ordiendum est. </p>

Descriptions

The descriptions are optional: you can set any combination of them, such as all of them or none of them.

Here is an example that uses only the expanded description:

Bonus

With an <img /> tag in your Expanded description, you can add other trackers or show a visitor counter on your landing pages, if the service counts visits with an image, such as:

1. https://www.flagcounter.me/
2. https://www.histats.com/
3. https://www.goatcounter.com/
4. https://statcounter.com/ ("html-only" version)