Knowledge Base

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

1. Create a new waypoint of any type and set the Style to “Embed”
   

2. 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.
   
   

3. 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.
   

4. Set the “Insert” value to the position you want to test.
   

5. 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