Journity Waypoints can be displayed as inline
content, alongside the existing content on any
page on your website. This is a great way to
add personalized content to your website
experience. Inline waypoints use the “Embed”
style, as opposed to the “Overlay” style that
appears above your content.
To use an Embed
Waypoint, you first need to
tell Journity where on the
page you want the waypoint to
appear. This is the “Embed
Location.” An Embed Location
can be determined relative to
the location of any other
element on your website that
has a CSS Selector, such as a
CSS class or CSS ID, that is
unique to the
page.
For example, this
website has an embedded
Journity waypoint on the right
side of the
page.
In the underlying HTML,
this area on the page has been
identified with the CSS class
“jty-sidebar-1” -- the only
space on the page with that
name.
Inside Journity, we’ve
created an Embed Location
using that information, and
given it the name “Home -
Sidebar
1.”
We’ve also told
Journity to place the embed
“Inside” the area identified
by the CSS selector. Other
position options are “before”
or “after” the area identified
by the CSS
selector.
Now, in this Journity
account, when we create an
embed-style waypoint, we have
“Home - Sidebar 1” as one of
the Embed Location
settings.
How to Setup Embed Locations
The selector must
be:
A CSS class or CSS ID
Used in only one location per page
You do not necessarily
need to create your own
Journity-specific selectors.
If there is an appropriate
selector already available,
you can use
that.
When choosing a
selector, keep in mind that
you will also choose whether
the embed location will be
inside, before, or after the
area designated by the CSS
selector.
Once you have
identified the CSS selector,
you are ready to setup your
embed
location.
Step 1: In
Journity, navigate to the
“Settings”
panel.
Step 2: On the
Account Settings panel, Click
on the “Add” button in the
“Embed Locations” box. This
will open the “Add Embed
Location” dialog
box.
Step 3: In the
dialog box, give your Embed
Location a unique name, choose
the position relative to the
CSS selector, and enter the
CSS selector. For this
example, I’m calling the new
location “Home Feature,” and
“content-area” is the name of
my CSS
selector.
Note: if you’re using a class,
include a period before the
selector. If you’re using an ID,
include a
hashtag.
Class as CSS
selector ID
as CSS
Selector
Step 4: Click
the “Submit” button to save
your new Embed Location. It
should now appear under “Embed
Locations” in Account
Settings
Your new embed location
should also now be available
as a location when creating an
embed-style
waypoint.
Need to make changes?
No problem! You can easily
edit the name, position, and
selector by returning to the
“Settings” screen and clicking
the gear icon next to your
embed
location.
ProTip: Use a test waypoint to troubleshoot your embed location your embed location
Create a new waypoint of any type and set the Style to “Embed”
The “Embed Settings” will default to a “Custom” setting for the embed location. This will make the additional settings for “Insert” and “CSS Selector” available directly on the waypoint.
In the “CSS Selector” box, enter the name of the CSS Class or ID that you want to test. Be sure to prefix a class with a period and an ID with a hashtag.
Set the “Insert” value to the position you want to test.
Click the “Live Preview” button to see what the waypoint will look like on your website. If you need to preview a page other than your homepage, enter the URL of that page in the box to the left of the “Live Preview” button.
Like what you see on
the preview? Then you’re good
to go ahead and use those
values to add an embed
location.
Don’t like what you’re
seeing? Go back through steps
3 through 5, trying different
values for the “Insert” and/or
the “CSS Selector” fields
until you find the right
combination.
Still need help? Reach
out to us! customersuccess@journity.com