Download free

Embed: installation

Embed needs one script line and one empty div, so it works on websites that allow a script tag. The steps for Webflow, Wix, Squarespace and Shopify below are instructions; we have not tested them in each builder.

The snippet

<script src="https://vinylletteringplugin.com/embed/v1/loader.js" data-shop="shp_xxxxxxxxxxxxxxxx" async></script>
<div data-vst-designer></div>

Replace the shop id with your own from the dashboard (Designer Embed); the dashboard also shows the snippet ready to copy. The optional attribute data-locale sets the language of the designer (for example nl_NL).

  • The script can sit in the head or in the body, before or after the div.
  • Only the first div[data-vst-designer] on a page is started. Additional ones stay empty.
  • The domain of the page must be registered for the shop (see Configuration). In test mode the designer also works on localhost.

Webflow

Add an Embed element where the designer should appear, paste both lines and publish. Custom code does not run in the Designer canvas, so check the published site.

Wix

Use an element that places your code in the page itself and paste the snippet. If your Wix element runs code inside a frame, the domain check sees the frame's domain instead of yours and the designer shows that it is not available on this website. In that case choose another element type, or contact us.

Squarespace

Add a Code Block where the designer should appear, paste the snippet and switch off Display Source.

Shopify theme

In the theme editor choose Add section, then Custom Liquid, and paste the snippet. Embed does not use the Shopify cart. In request mode the customer sends an order request to you; if you want the design in the Shopify cart, use event mode and add your own code.

Plain HTML

<!doctype html>
<html>
<body>
  <h1>Design your lettering</h1>
  <script src="https://vinylletteringplugin.com/embed/v1/loader.js" data-shop="shp_xxxxxxxxxxxxxxxx" async></script>
  <div data-vst-designer></div>
</body>
</html>

Check that it works

  1. Open the published page (not the editor preview).
  2. The designer appears in the div. If you see "not available on this website", the domain is not registered or the licence is not valid. See CSP and troubleshooting.
  3. Design something and send a request. In request mode it arrives by e-mail and in your dashboard.