Crafted Pour Cocktail Gallery Plugin
Webflow Installation Instructions
Rev. March 20, 2023
The Crafted Pour cocktail gallery runs in JavaScript, allowing installation flexibility on various web hosting platforms. All gallery content is dynamically generated by Crafted Pour (from the google cloud). Since the plugin is embedded using Javascript, SEO benefits should flow to the container website.
Integration to Webflow:
To integrate CraftedPour Cocktail Gallery plugin into a Webflow site:
1. Open the designer for which you want to integrate the recipes:
2. Go to the Pages menu on the left side panel and click on Create New Page button as shown below
Image 1
3. Enter the Page Name and click on Create
4. Go to the left side panel and click “+” button to add a new element and select Embed element from a list:Go to the left side panel and click “+” button to add a new element and select Embed element from a list:
Image 2
Image 3
5. You should now see the HTML Editor. Paste the following script into it:
<script id="crafted-pour-recipe-plugin-script" type="text/javascript" src="https://plugin.craftedpour.com/scripts/crafted-pour-recipe-plugin.js?brand=<brand_id>&color=<color_hex>">
Alternatively, you can generate a gallery for a single product by replacing “brand=” with “product=” and using a product id supplied by Crafted Pour.
<script id="crafted-pour-recipe-plugin-script" type="text/javascript" src="https://plugin.craftedpour.com/scripts/crafted-pour-recipe-plugin.js?product=<product_id>&color=<color_hex>">
You can also optionally add &rows= followed by an integer. This will cause the plugin to display up to that many rows with arrows to flip pages rather than an infinite number of recipes on the same page.
Replace the brand_id, product_id, and color_id in the above script as follows:
brand_id and product_id: As provided by Crafted Pour.
color_hex: This can be any color in the form of a hex value with six digits (without “#”), e.g., FF01ED.
For help finding Hex codes, you can use a hex color tool such as found here: https://htmlcolorcodes.com
It should look something like as below:
Click on Save & Close.
6. You can preview the page from Publish menu by clicking the arrow icon:
Image 10
7. You should now have the recipes loaded on the new page:
Image 10
Enjoy your new cocktail gallery
Contact support@craftedpour.com with any questions or issues