The directory listing option for MySLP makes it easy to provide a list of states in which your locations reside. The directory listing can be easily added to any Wix site by using the directory style presentation when embedding the MySLP code.

The Wix embed code presentation leaves a bit to be desired when it comes to formatting. When you drop an embed block into a Wix page it will often add far too little padding, is not centered, and does not default to a big enough height to display a list of locations.

Getting Started With The Embed Format

When using Wix we find it easier to format the MySLP embed code by using the advanced editor.

Start by adding an Embed , HTML block into the page. Wix will drop this in a random semi-centered location on the page. Drag it down to an available space on the page.

Embedding an HTML object into a Wix site.

It is best to set the embed block to be 100% the width of the content. The gutters should be marked with a dashed line to show the left/right main content width. Stay between the gutters.

Set a default height tall enough to show the listing. An embed box height of 800 is a good start.

Relocate the embed HTML box to the white space of the page. You may need to add the white space to your Wix page by tweaking the height position (Y) of the elements on your page.

Click on the embed box and look for Enter Code on the top-left corner of the box.

Enter the MySLP SaaS embed code, make sure you add <style> section and include a data-presentation=”directory” attribute on the embed script to get the directory listing in place of a map of locations.

Enter the embed code and related <style>..</style> section as noted below.

Example Embedded MySLP Directory Code

The following embed code can be added to ensure CSS styling is included along with the JavaScript-based directory functionality of MySLP.

<style>
.slp_directory_list.slp_directory_style_list {
    display: flex;
	  flex-wrap: wrap;
    justify-content: space-between;
}
.slp_directory_entry {
    padding: 0 5px;
}
</style>
https://dashboard.storelocatorplus.com/front-end/location.js

If all went well you can publish the site and should see an interactive states directory listing similar to this: