Embedding Rentle on your website

How to add your Rentle online store to your website

This guide will show you how to add Rentle to your website. If you want to embed Rentle on a website built with a platform such as Wix, Squarespace, or WordPress, please see the separate platform-specific guides here.

Note: In order to embed the Rentle online store on your website, you have to be able to edit the HTML code of your website directly.

Step 1) Add the Rentle script to your website

First, you'll need to add the Rentle embed script to your website. If you have multiple pages on your website, you should only add this script to the page or pages where you intend to show your embedded Rentle store.

Go to the HTML file(s) of the page(s) where you want to embed Rentle, and add the following script tag to the <head></head> section:

 <script type="text/javascript" src="https://cdn.rentle.io/embed/bundle.js" defer></script>

In a simple HTML file, that could look like below, for example:

<!DOCTYPE html>
<html lang="en">
  <head>

    <!-- Add the Rentle script here -->
    <script type="text/javascript" src="https://cdn.rentle.io/embed/bundle.js" defer></script>

  </head>
  <body>
    <h1>Welcome to my website!</h1>
  </body>
</html>

Technical note: The Rentle script is already optimized (minified and gzipped) and served via a Content Delivery Network (CDN). Using 3rd party script loaders like NitroPack or WP Rocket will not significantly speed up your website, and may leave you with an outdated version of the script.

Step 2) Define where you want to show your Rentle store

Next, you'll need to define where on the page you would like your embedded Rentle store to be displayed. You can do that by copying the below HTML snippet to the relevant section of your page:

<rentle-store shop="myshop" />

Note: You should replace "myshop" in the above snippet with your store's name. You can get this from the URL of your Rentle online store (e.g. https://rentle.store/myshop)

Again, in a simple HTML file that could look like below:

<!DOCTYPE html>
<html lang="en">
  <head>

    <!-- Add the Rentle script here -->
    <script type="text/javascript" src="https://cdn.rentle.io/embed/bundle.js" defer></script>

  </head>
  <body>
    <h1>Welcome to my website!</h1>
    <!-- Add the rentle-store element here -->

    <rentle-store shop="myshop" />
  </body>
</html>

That's it! You should now have your Rentle online store visible on your website.

Next, you can have a look below to learn how you can customize your embedded store by passing parameters to the rentle-store element.

Step 3) Configure your embed

The rentle-store HTML element supports a variety of configuration parameters, which allow you to define, for example, which product or category should be shown in the embedded store by default, or which language should be used.

Option 1) Use the Embed Builder app

The easiest way to get the correct parameters for your embed is to visit the Rentle Embed Builder app. In the app, you can simply navigate to the page in your online store which you would like to embed, and the app will give you the correct code snippet to copy to your website.

For more configuration options, see the full list of possible options below.

Option 2) Configure manually

You can pass in parameters to the rentle-store element with standard HTML syntax, for example:

<rentle-store 
  shop="myshop"
  store="mystorelocation"
  category="123apsgiaat325"
/>

The full list of parameters and their behavior is as follows:

Parameter	Value	Required	Default
shop	The name of the shop to embed, e.g. myshop.	Yes	None
store	The name of a specific store location to embed, e.g. mystorelocation.	No	None
lang	The language of the embed. By default, the embed uses the system/browser language of the user viewing it, but if for example you have a separate language toggle on your website and would like to force the embedded store to use the same language, you can override the language by passing in a valid two-letter language code as the value of this parameter. For example: "en", "fi", or "de". Make sure the language you are setting is enabled for your Rentle online store - otherwise this will not do anything.	No	User language
height	By default, the height of the embedded store is automatically resized to fit the content within. This improves user experience, as it removes the need for a scrollbar within the embedded store. If you want, you can also set a fixed height for your embedded store by passing in a valid HTML height as the value of this parameter (e.g. "1000px" or "100%" or "100vh").	No	None
category	The ID of a specific category to show in the embed by default.	No	None
product	The ID of a specific product to show in the embed by default. If provided, the category and ticket parameters will be ignored.	No	None
ticket	The ID of a specific ticket product to show in the embed by default (requires Skidata integration).	No	None
disableautoscroll	By default, your website user is automatically scrolled to the top of the embedded store when the page changes or a dialog is shown inside the embed. This improves user experience in most cases, but you can disable this behavior by passing in "true" as the value of this parameter.	No	false
disableheightanimation	By default, when the height of the embedded store changes, the height is animated to its new value to prevent stutter. You can disable this behavior by passing in "true" as the value of this parameter.	No	false