Embedding Price History Component on Your Product Pages

Our SaaS service provides a price history component that can be embedded on your product pages in three different ways. In this guide, we'll go over each method in detail, and provide step-by-step instructions on how to implement each one.
 

Method 1: Iframe Embed

The first method involves embedding the price history component using an iframe. Here are the steps to implement this method:

Copy the following code:

<iframe src="https://portal.pricestory.io/embed/?customerId={CUSTOMER-ID}&article={URL-OR-SLUG}"></iframe>
  1. Replace `{CUSTOMER-ID}` with your customer ID, which can be obtained from our service.
  2. Replace `{URL-OR-SLUG}` with the URL or slug of the article for which you want to display the price history.
  3. Paste the code into the HTML of your product page where you want the price history component to appear.

 

Method 2: Using Our Provided Script

The second method involves using a script provided by our service. This method requires adding a script tag in the header and a div in the body of your product page. Here are the steps to implement this method:

Copy the following code:

<script src="https://portal.pricestory.io/js/pricestory.js"></script>
   <script>
   	Pricestory.init({CUSTOMER-ID}, "pricestory-container");
   </script>
   <div id="pricestory-container"></div>
  1. Replace `{CUSTOMER-ID}` with your customer ID, which can be obtained from our service.
  2. Paste the code into the HTML of your product page, just before the closing `</body>` tag. This method will create a div with the ID `pricestory-container`, where the price history component will be rendered.

 

Method 3: SPA Implementation

The third method is similar to the second method, but it's designed for Single Page Applications (SPAs). This method also requires adding a script tag in the header and a div in the body of your product page, and it involves calling a function to render the price history component. Here are the steps to implement this method:

Copy the following code:

<script src="https://portal.pricestory.io/js/pricestory.js"></script>
       <script>
       	Pricestory.init({CUSTOMER-ID}, "pricestory-container", false);
       </script>
       <div id="pricestory-container"></div>
    1. Replace `{CUSTOMER-ID}` with your customer ID, which can be obtained from our service.
    2. Paste the code into the HTML of your product page, just before the closing `</body>` tag.
    3. When you want to load the price history component, call the following function:
Pricestory.renderIframe({ARTICLE-URL});
  1. Replace `{ARTICLE-URL}` with the URL or slug of the article for which you want to display the price history.

 

And that's it! By following these simple steps, you can embed the price history component on your product pages in no time. If you have any questions or issues, feel free to contact our support team for assistance.