This feature is available on all Goodshuffle Pro Plans.
Lovable is an AI powered website builder that allows you to build and maintain a custom website without knowing any code. We'll cover starting a brand new Lovable site, as well as integrating into an existing website, with the steps below!
Building a Brand New Website
Head to lovable.dev and create a Lovable account. We suggest the Pro plan with 100 credits, priced at $25 a month. This is the lowest plan, and will allow you to be fully creative with your custom site!
Once logged in, you'll see a screen that allows you to type out your prompt to get started. Copy the prompt below to get started on your website:
I am building an event rental site, and I want it to be like <insert your own idea>
Place this code in the header,
<script type=“module” src=“https://unpkg.com/@goodshuffle/[email protected]/dist/gspro-wc/gspro-wc.esm.js”></script> <script nomodule=“” src=“https://unpkg.com/@goodshuffle/[email protected]/dist/gspro-wc/gspro-wc.js”></script><gspro-wishlist-config data-url=“https://data.goodshuffle.com/vendor/YOUR-PUBLIC-BROWSER-KEY” require-phone-number=“true”>
</gspro-wishlist-config>
Exactly as it appears and make no changes to it.
Then, on a rental inventory page, add <gspro-item-gallery></gspro-item-gallery> to load items. Thanks!
Change the idea to be whatever you'd like, and be sure to include your Public Browser Key where indicated.
Within 5 minutes, Lovable will build a custom website that matches your theme. Below is an example of the prompt and the resulting demo site from one of our team members!
To customize your site (whether it's colors or listing different items), check out this article.
Copying an existing website not hosted on Lovable
Copying your existing site to Lovable takes just a few minutes. As long as your current site is public, you can ask Lovable to recreate it.
Head to lovable.dev and create a Lovable account. We suggest the Pro plan with 100 credits, priced at $25 a month. This is the lowest plan, and will allow you to be fully creative with your custom site!
Once logged in, you'll see a screen that allows you to type out your prompt to get started. Copy the prompt below to recreate your existing site:
I am building an event rental site, and I want it to copy <Your existing URL>
Place this code in the header,<script type=“module” src=“https://unpkg.com/@goodshuffle/[email protected]/dist/gspro-wc/gspro-wc.esm.js”></script> <script nomodule=“” src=“https://unpkg.com/@goodshuffle/[email protected]/dist/gspro-wc/gspro-wc.js”></script><gspro-wishlist-config data-url=“https://data.goodshuffle.com/vendor/YOUR-PUBLIC-WEBSITE-KEY” require-phone-number=“true”></gspro-wishlist-config>
Exactly as it appears, and make no changes to it.Be sure to include your Public Browser Key where indicated.
You can add the below to your prompt if you already have the Goodshuffle integration. If you're starting Lovable and adding the integration, you can skip this step.
If you're able, view the goodshuffle HTML on each page ( formatted as <gspro-item-list></gspro-item-list> ) and get the same items to appear.
Within a few minutes, your site will be fully rebuilt on Lovable, ready to be tweaked however you like. If you had Goodshuffle inventory on your previous site, it'll appear on the same pages! Take a look at the links to see an example where Lovable recreated https://lucilleenterprises.squarespace.com/ into https://lucilleenterprises.lovable.app/. An important note: This was done with a single prompt. No additional editing was done, and the process was completed within 5 minutes.
To customize your site (whether it's colors or listing different items), check out this article.
Adding the integration to your existing Lovable site
If you already have an existing Lovable site, adding the integration is easy. After the integration is purchased, add this prompt to your site:
Place this code in the header,
<script type=“module” src=“https://unpkg.com/@goodshuffle/[email protected]/dist/gspro-wc/gspro-wc.esm.js”></script> <script nomodule=“” src=“https://unpkg.com/@goodshuffle/[email protected]/dist/gspro-wc/gspro-wc.js”></script><gspro-wishlist-config data-url=“https://data.goodshuffle.com/vendor/YOUR-PUBLIC-WEBSITE-KEY” require-phone-number=“true”></gspro-wishlist-config>
Wherever you'd like items listed (i.e. a new or existing rentals page), ask Lovable to add <gspro-item-gallery></gspro-item-gallery>
To customize your site (whether it's colors or listing different items), check out this article.
Need Additional Support?
Click the blue chat bubble in the bottom corner of your screen to message our support team—we’re happy to help!