Install HailXplore™
Use the HailXplore™ Widget Maker to create your installation code,
then paste the completed code into a Code Block
where you want HailXplore™ to appear.
<div class="hail-xplore"></div>
<script
src="https://hailaisystems.com/embed/feed.js"
data-private="false"
data-lang="en"
data-theme="auto"
data-logo="https://YourLogo.png"
data-title="Your Name or Brand"
data-subtitle="Your Subtitle"
data-subjects="Your Tagline"
data-font="Arial, Helvetica, sans-serif"
data-location="Keyword 1, Keyword 2, Keyword 3"
data-blocked=""
data-posts="8"
data-columns="4"
data-background="#ffffff"
data-card-background="#f7f7f7"
data-mainfont="#111111"
data-headerfont="#697C89"
data-linkcolor="#697C89"
data-uicolor="#697C89"
data-pop-background="#ffffff"
data-pop-card-background="#f7f7f7"
data-pop-mainfont="#111111"
data-pop-headerfont="#697C89"
data-pop-linkcolor="#697C89"
data-pop-uicolor="#697C89"
defer
></script>
Brand & Content
data-private
When true, restricts the feed to public content associated with
your approved site's source.
data-private="true"
Leave this setting false, or omit it, for the general public feed.
Private feeds require an approved site and a matching content source.
If the source cannot be resolved, the request stops.
Search Keywords and Blocked Keywords further filter that site's content.
This setting controls content selection; it does not make public
articles confidential.
data-logo
Displays your logo at the top of HailXplore™.
Use the full public URL for your logo image.
data-title
Sets the main title displayed at the top of your widget.
data-title="Your Title"
data-subtitle
Sets the supporting line beneath the title.
data-subtitle="Real Estate"
Tagline — data-subjects
Displays your tagline, publication name, or blog identity.
This is display text and does not filter content.
data-subjects="The Bozeman Blog"
data-font
Sets the font family used by the HailXplore™ widget and opened results.
data-font="Arial, Helvetica, sans-serif"
The Widget Maker uses standard system font stacks that are available
on most devices. Choose from:
Arial, Helvetica, sans-serif
Helvetica, Arial, sans-serif
Verdana, Geneva, sans-serif
Tahoma, Geneva, sans-serif
'Trebuchet MS', Arial, sans-serif
Georgia, 'Times New Roman', serif
'Times New Roman', Times, serif
'Courier New', Courier, monospace
Arial Black, Arial, sans-serif
Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif
Arial / Helvetica is the Widget Maker default.
Important
Search Keywords — data-location
This is the primary content-focus setting for your HailXplore™ widget.
Enter the locations, topics, names, industries, subjects, or other
keywords you want HailXplore™ to use when selecting content.
Matching checks titles and stored keywords.
Separate entries with commas. Words between commas stay together
as a phrase. Content can match any listed entry.
Matching ignores capitalization, uses whole-word boundaries,
and includes the system's singular/plural variants.
data-location="Bozeman, Big Sky, Livingston, Montana, Cocktail, Recipe"
For example, napa california is one phrase,
while napa, california is two separate entries.
A whole-word entry such as car does not match
carport.
Accepts up to 50 comma-separated words or phrases, with a
1,000-character total limit and 80 characters per entry.
Each phrase counts as one entry.
Leave blank to apply no Search Keywords restriction.
Content Exclusions
Blocked Keywords — data-blocked
Enter words or phrases you want excluded from your feed.
A result is excluded when its title or stored keywords match
any blocked entry. This setting does not scan the article body.
Separate entries with commas. Words between commas stay together
as a phrase. Matching ignores capitalization and uses whole-word
boundaries.
data-blocked="politics, crime, napa california"
Blocked entries use the word or phrase supplied.
Singular and plural forms are not added automatically.
For example, car blocks car,
but not cars or carport.
Enter car, cars to block both forms.
Blocked Keywords take priority over Search Keywords.
A result matching both an included entry and a blocked entry is excluded.
When data-private="true", both keyword lists further
filter content from your approved site's source.
If no results remain, the feed stays empty.
Accepts up to 50 comma-separated words or phrases, with a
1,000-character total limit and 80 characters per entry.
Each phrase counts as one entry.
Leave blank, or omit the attribute, to block nothing.
data-blocked=""
Content Display
data-posts
Sets the maximum number of results loaded into the widget.
data-posts="8"
The Widget Maker offers values from 1 to 30, with 8 selected by default.
Fewer results may appear when fewer posts match your filters.
data-columns
Sets the number of cards displayed across the widget on desktop.
data-columns="4"
Common choices are 2, 3, 4, or 5 columns.
Mobile devices automatically use a single-column presentation.
Widget Colors
These settings control the appearance of the main HailXplore™ widget.
Standard hexadecimal color values may be used.
data-background
Main widget background.
data-card-background
Individual card background.
data-mainfont
Primary text color.
data-headerfont
Heading color.
data-linkcolor
Link color.
data-uicolor
Interface and accent color.
data-background="#ffffff"
data-card-background="#f7f7f7"
data-mainfont="#111111"
data-headerfont="#697C89"
data-linkcolor="#697C89"
data-uicolor="#697C89"
Opened Result Colors
These settings control the branded appearance of an individual
HailXplore™ result when a visitor opens it.
data-pop-background
Opened result background.
data-pop-card-background
Opened result card background.
data-pop-mainfont
Primary text color.
data-pop-headerfont
Heading color.
data-pop-linkcolor
Link color.
data-pop-uicolor
Interface and accent color.
data-pop-background="#ffffff"
data-pop-card-background="#f7f7f7"
data-pop-mainfont="#111111"
data-pop-headerfont="#697C89"
data-pop-linkcolor="#697C89"
data-pop-uicolor="#697C89"
Optional Manual Controls
The Widget Maker handles the settings most subscribers need.
The following optional settings may be added manually to the
script tag when additional control is required.
data-search
Starts the widget with a specific search already applied.
data-search="Restaurants"
This is different from data-location.
Search Keywords define the overall content focus;
data-search applies an initial search within that content.
The initial search can change as visitors interact with the widget.
Search Keywords, Blocked Keywords, and the Private source restriction
remain active.
data-show-logo="false"
Hides the logo.
data-show-title="false"
Hides the title.
data-show-subtitle="false"
Hides the subtitle.
data-show-subjects="false"
Hides the tagline.
data-show-search="false"
Hides the visitor search box.
data-attribution="false"
Hides the HailXplore™ attribution footer.
Optional Size & Spacing
data-gap
Changes the space between cards.
data-gap="20"
data-image-height
Changes the height of card images.
data-image-height="230"
data-max-width
Sets the maximum width of the widget.
data-max-width="1080"
data-height
Sets a minimum widget height. The standard setting is automatic.
data-height="auto"
data-border-radius
Overrides the standard outer corner radius.
data-border-radius="18"
data-card-radius
Overrides the standard card corner radius.
data-card-radius="14"
HailXplore™ already uses 18px outer corners and 14px card corners
by default, so these settings normally do not need to be added.
Example
A completed branded installation with Search Keywords and
Blocked Keywords may look like this:
<div class="hail-xplore"></div>
<script
src="https://hailaisystems.com/embed/feed.js"
data-private="false"
data-lang="en"
data-theme="auto"
data-logo="https://YourLogo.png"
data-title="Courtney King"
data-subtitle="Real Estate"
data-subjects="The Bozeman Blog"
data-font="Arial, Helvetica, sans-serif"
data-location="Bozeman, Big Sky, Livingston, Montana, Cocktail, Recipe"
data-blocked="politics, crime"
data-posts="8"
data-columns="4"
data-background="#ffffff"
data-card-background="#f7f7f7"
data-mainfont="#111111"
data-headerfont="#697C89"
data-linkcolor="#697C89"
data-uicolor="#697C89"
data-pop-background="#ffffff"
data-pop-card-background="#f7f7f7"
data-pop-mainfont="#111111"
data-pop-headerfont="#697C89"
data-pop-linkcolor="#697C89"
data-pop-uicolor="#697C89"
defer
></script>