Sharefox Embed
Introduction
Sharefox Embed is a powerful new feature that allows you to seamlessly integrate your Sharefox rental shop into any website. This means you can offer your customers a smooth and consistent rental experience, no matter where they are on your online platform.
What Sharefox Embed Enables:
- Increased Visibility: Showcase your rental offerings directly on your main website, blog, landing pages, or any other online platform.
- Branding Consistency: Maintain a unified brand experience across your entire online presence.
What can I do with Sharefox Embeds?
Currently, Sharefox offers three types of embeds:
- Popular products component: Showcase your most popular products. This allows customers to see some of your most popular, or highlighted, products at a glance and easily navigate to specific items.
- This is a component a bit similar to what can be found on your Sharefox shop front page called "Top Products" (It can be enabled for the Sharefox front page by going to Settings -> Template -> Top Products)
You can choose what products should show here, by accessing the product page in admin, and navigating down to "Display Order in Shop", where a high value will prioritize the display order of this product.
- You can choose how many products should appear - they will all show in one row
- Example: Imagine a visually appealing grid of products, with images, names, and prices. Clicking on a product takes the user to the full product page on your Sharefox site.
<div data-path="products-popular" data-volume="4" class="sharefox-embed" style="width: 100%; height: 282px;"></div>
- Simple Search component: Let your customers quickly find the products they need with a basic search bar.
- Example: (Imagine a search bar here, where users can type in keywords like "skis" or "mountain bike". Hitting the Enter button takes them to the search results page on your Sharefox site.)
<div data-path="search" class="sharefox-embed" style="width: 100%; height: 90px;"></div>
- Advanced Search component: Offer a more comprehensive search experience with filters for location, pickup and return times.
- Example: (Imagine a search bar with additional fields for location, date, and time selection. Clicking the search button takes them to the filtered product search results page on your Sharefox site.)
<div data-path="search-advanced" class="sharefox-embed" style="width: 346px; height: 440px;"></div>
Key Benefits
- Increased Bookings: Make it easier for customers to find and rent your products, leading to more conversions.
- Enhanced User Experience: Provide a seamless and engaging rental experience right through your website.
- Easy to Implement: Simply copy and paste the embed code into your website's HTML.
Ready to get started?
All the embeds are powered by one tiny script. It’s necessary to copy and paste the script at the end of the element in your HTML file:
<script id="sharefox-embed-script" data-shop="[YOUR-SHAREFOX-SITE]" src="https://[YOUR-SHAREFOX-SITE].mysharefox.com/embed.min.js" async></script>
Please replace [YOUR-SHAREFOX-SITE] with the actual value.
Next step is to pick an embed from the list above, copy the HTML element and paste it where you’d like it to be shown.
Technical documentation
Embed script element
The <script> element is crucial for loading and initializing the Sharefox Embed functionality on your website. Here's a breakdown of its attributes:
Attributes
| Name | Description | Value | Required | Editable |
|---|---|---|---|---|
| id | The ID of the script element used as selector. | sharefox-embed-script | yes | no |
| data-shop | The shop name that the embed will connect to. | no, however every div element must have the property set. It’s recommended to set the property on the script element. | yes | |
| data-hostname | Change the url of where the embeds are being loaded from. | no | yes |
Embed div element
The <div> elements act as placeholders for the embedded content on your website.
Attributes
| Name | Description | Value | Required | Editable |
|---|---|---|---|---|
| class | The class of the div element used as selector. | sharefox-embed | yes | no |
| data-path | The type of embed to use. | “search” | “products-popular” | “search-advanced” | yes | yes |
| data-shop | The shop name that the embed will connect to. | Only, if the data-shop property is not set on the script element. | yes | |
| style | Additional style properties for the iframe window. | no | yes |
Additional properties for specific embed types:
Product List
| Name | Description | Value | Required | Editable |
|---|---|---|---|---|
| data-volume | The number of products to display in the embed. | Default: All popular products set in Sharefox system. | no | yes |
Search
| Name | Description | Value | Required | Editable |
|---|---|---|---|---|
| data-products-path | The subpage of the “products” page. It will be used in the redirect after submitting the search query. | Default: products | no | yes |
Search Advanced
| Name | Description | Value | Required | Editable |
|---|---|---|---|---|
| data-products-path | The subpage of the “products” page. It will be used in the redirect after submitting the search query. | Default: products | no | yes |
Feel free to use our Embed Wizard application: https://drfr0st.github.io/sharefox-embed-wiz/
The Transformation Process
When your webpage loads, the Sharefox Embed script will take care of configuring each embed element and rendering the iframes.
Important Notes
- Placement: Place the <script> element at the end of your <body> tag to ensure that it loads after the rest of your webpage content. This prevents the script from blocking the rendering of your page.
- Customization: Use the style attribute on the div elements to control the size and appearance of the embedded content. You can adjust the width, height, borders, and other visual properties to match your website's design.