Prerequisites

To be able to use the widget, the following prerequisites must be fulfilled:

• Your customer id needs to be activated for the external widget feature. Any domain that will be rendering the widget must be added to a list of accepted domains for your specific customer id by Boråstapeter. Please provide this information beforehand to Boråstapeter, to speed up the process.
• You need to have knowledge of Boråstapeter's article numbers for the wallpapers you want to use, as you need to provide the article number when initializing the widget.
• The unit price (per square meter) must be known in advance for each wallpaper if you want the widget to calculate the price for you. This is required if you are using the optional panel.

Getting started

1. Add the following script tag to the end of body:

<script src="{URL}/ui/measured_wallpaper/bundle.min.js" async></script>
Copy

Replace {URL} with the correct URL for your environment

2. Add the container element, where the iframe will be injected:

<div id="wallpaper-frame"></div>
Copy

3. Initialize the iframe, when the script is ready, using the window.initMeasuredWallpaperAsync method:

document.addEventListener("WallpaperFrameReady", () => {
  const wallpaperFrame = await window.initMeasuredWallpaperAsync(
    '#wallpaper-frame', // element selector
    {
      articleNumber: '9469w',
      wallWidth: 343, // Can be 0 if you don't know the initial size
      wallHeight: 260, // Can be 0 if you don't know the initial size
      culture: "sv-SE",
      customerId: "12345",
      mode: "test",
      price: {
        unitPrice: 250,
        currency: "SEK",
        vatRate: 0.25
      },
      onCuttingsDataChanged: (e) => console.log(e), // Called when any data relating to the cutout is changed, such as the wall sizes or cutout is moved.
    }
  );
});
Copy

Information

Order placing

To actually place the order you need to add a buy button that calls the getCutoutUrlAsync() function. This will not actually place an order for the wallpaper but return the url needed to place the order on borastapeter.com. You will need to store this url when the order is placed on your webshop to be able to manually place the order on borastapeter.com later on.

When using the optional panel, you can enable a buy button that triggers the onAddToCart(e) method when clicked.

Using the panel

The widget has a built in optional panel that can be configured with the panel parameters. See example below:

document.addEventListener("WallpaperFrameReady", () => {
  const wallpaperFrame = await window.initMeasuredWallpaperAsync(
    '#test', // element selector
    {
      articleNumber: '9469w',
      wallWidth: 343,
      wallHeight: 260,
      culture: "sv-SE",
      customerId: "12345",
      mode: "test",
      price: {
        unitPrice: 250,
        currency: "SEK",
        vatRate: 0.25
      },
      onCuttingsDataChanged: (e) => console.log(e),
      onAddToCart: (e) => console.log(e), // Called when pressing the buy button in the optional panel
      panelOptions: {
          showPanel: true,
          showBuyButton: true,
          showWalldropdowns: true
      }
    }
  );
});
Copy

Here you can configure if you want to show the panel, as well if you want to show a buy button and dropdowns to set the size.

Rendering of initial wallpaper image

When the widget is initialized without any wallWidth or wallHeight set it won't render the wallpaper image. This is because the widget needs to know the wall size to render the wallpaper image. The user can set the wall size by calling the setWallSizeAsync method. This could be useful if you're waiting for the user to input the wallpaper size before showing the widget. If you instead want to set a predefined size you can use getWallWidths() and getWallHeights() to get a valid size to call the function setWallSizeAsync() with.

Error handling

If the wallWidth or wallHeight are set to a size lower than 3m² or if they are set to a value outside of the predifined values for the wallpaper type, the widget will throw an error. This can be catched to display an error message for the user. It can be helpful in cases where the user inputs the width and height in freetext format, however our strong recommendation is that you display a dropdown or similar to make sure the user selects a predefined size. See getWallWidths() and getWallHeights().

Environments

Different environments requires different urls.

Test

Url: https://yvbhdj-test-litium.litium.app/

Set the mode property to test.

Production

Url: https://www.borastapeter.com

Set the mode property to production.

Modify the wallpaper frame

It's possible to modify the cutout frame, such as changing the article number or updating the wall sizes. Changing the article number triggers a reload of the frame.

Most of the methods to change any property are async (returns a Promise), as they require fetching data from the server.

Changing article number

See setArticleNumberAsync() for specific details.

await wallpaperFrame.setArticleNumberAsync("9407w");
Copy

Setting the wall width/height

Note! The wall width/height have predefined valid values, based on the type of the wallpaper. See getWallWidths() and getWallHeights() for specific details.

await wallpaperFrame.setWallWidthAsync(539);
await wallpaperFrame.setWallHeightAsync(230);

// Or one method to change both
await wallpaperFrame.setWallSizeAsync(539, 230);
Copy