Shrunk Punk
Shrunk Punk is designed to be embedded in your website and quickly gives visitors an idea of the size of the heat pump they would need to heat their home - all without you lifting a finger!
Leads are stored in your Heatpunk Pro account so you can quickly follow up with a full quote for a heat pump installation.

Setting Up Shrunk Punk
Shrunk Punk is an instant heat loss calculator and lead generation tool that can be embedded in your website to allow your customers to get an immediate indication of the suitability of their property for a heat pump. Leads generated by the tool are imported into your Heat Punk account, so that you can turn them into projects. 

 Enabling the tool in Pro Account Settings 

 To configure Shrunk Punk, navigate to Pro Account Settings  and go to the Shrunk Punk tab. 

 

 You will then need to set up: 

 

  SMTP email credentials (this is different for different email providers - there are guides online). 

 Installation area 

 Website domains 

 Appearance  

 Email templates 

 

 

 Emails 

 You can optionally configure SMTP email credentials for one of your email addresses so emails will be sent from that address instead of a no reply at Heat Punk email address. 

 You can also add in other email addresses to copy in on the emails that are sent so that could be an email for your sales team or another generic mailbox. 

 

 Installation Area 

 Enter the postcodes for the area that you cover as a comma separated list. You can specify whole postcode districts (eg 'CB' for Cambridgeshire, or 'EH' for Edinburgh), or outward codes (eg 'CB1' or 'SW1A') if you want to specify smaller areas. An example might be 'EH, ML, FK1, FK2, FK3' for an installer that covered Edinburgh, Motherwell and the eastern Falkirk postcode areas. 

 

 If a customer visits your site and uses the tool to request a heat loss check, it will still work even if they are not located in a postcode you serve. Instead of you being notified of the lead however, the lead will come to us. We will endeavour to find installers in their area who are able to provide a quote. This works both ways - we can pass on leads from other installers to you when they have requests for estimates for customers who are not in their area! 

 

 Setting up website domain 

 Start by putting in the website domain for the websites you want to host the tool on. If you would like to embed it in more than one website, then add an additional row to your list of URLs. If you would like to remove a domain, click the option highlighted below. 

 Please note you only need to include the  domain of the website, not the full address. For example, if the tool will appear at "www.mywebsite.com/heat-loss-tool then you only need to input "www.mywebsite.com" into the URLs section. 

 

 Appearance 

 On the appearance tab, you can set the primary colour to use for the iconography colour scheme and any buttons in the tool. 

 

 

 Template Emails 

 Here you can customise the automated email that goes out to new leads, follow emails, quick quotes and lead rejection emails. 

 

 Terms 

 On the terms tab, read through the specific terms for Shrunk Punk and once you're happy, click I accept the terms of use. 

 Please note: You will need to update your websites Privacy Policy to reflect the use of Shrunk Punk 

 

 Generate Key 

 

 Once that's all done, you can then start using the tool in your website! If you have any questions, please contact our support team at help@heat-punk.co.uk  

Embedding Shrunk Punk into your website
Shrunk Punk is a lead generation tool that can be embedded into your website for customers to use when they visit your site. It appears in the bottom right corner as a little widget that allows customers to get a quick estimate of how suitable their home would be for a heat pump. The leads generated by the tool link straight into your HeatPunk account so that you can create projects and quotes off the back of these leads. 

 In order to embed Shrunk Punk into your website, you’ll first need to log into your HeatPunk Pro account, and navigate to Pro Account Settings . Next, click on Shrunk Punk tab in the top navigation bar, and you should be greeted with all of the Shrunk Punk configuration settings. 

 

 Next, you’ll need to work your way through the settings and make sure that you’ve filled out the necessary fields. If you want to customise the colour of your Shrunk Punk widget, you can do so - just make sure that there is sufficient contrast between the text and background colours, and between the button text and background colours! 

 If you’d like the emails sent out to your customers to come from your own company email, rather than our generic no-reply address, we recommend you set up your SMTP email credentials in the Email tab before enabling the widget too. It will still work without doing so, but it’ll make it easier for your customer to get in touch with you and remember who the estimate was from if it’s coming from your own email and not ours. 

 Note that further down in the page you are able to customise the emails that are sent out to your customers through the tool. At time of writing, only the Automated heat loss email is sent after the customer uses your tool to generate an estimate, but soon we will be adding support for you to be able to easily get in contact, decline, nudge etc. regarding the leads. 

 You’ll need to fill out the postcodes for the area that you cover in the Installation area section of the Shrunk Punk tab, to make sure that you aren’t wrongly charged for leads that you can’t feasibly complete installations for, e.g. if you’re based in Cornwall, you won’t want to be dealing with leads in Scotland! 

 Next, enter your website domain and make sure you only include the domain itself , e.g. heatpunk.co.uk, and not the full URL like https://heatpunk.co.uk/home . 

 

 Then, you can click  Generate key which will produce an API key linked to your domain — if you ever change your domain, you’ll need to generate a new key and update the code snippet in your website in order for Shrunk Punk to appear. If you re-generate this key, be aware that it will cause existing instances of Shrunk Punk on your website to break — they will need to be updated with the new key. 

 

 Then, make sure you’ve read and accepted the Shrunk Punk terms of use and billing conditions by toggling the switch under  Accept terms . 

 

 Finally, you’ll need to embed the code snippet generated by the tool into your website’s code. You should see a string of random letters and numbers after api_key= , that’s the key that you just generated which links the tool to your domain. 

 

 

 

 Copy the code snippet and paste it anywhere in your website’s HTML - it shouldn’t matter whatsoever whether you put it in the header, or the main body of the page. If you’re struggling to paste the code, try clicking where you want to paste and using the keyboard shortcut Ctrl + V instead. 

 You can include the snippet in as many pages as you need or want, as long as they are on the same domain that you just linked it to. Here’s an example of what your code may look like once you’ve pasted the <script> tag in: 

 <!DOCTYPE html>

<html lang="en">

<head>

 <meta charset="UTF-8">

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

 <title>Pure Heat Solutions</title> 

</head>

<body>

 <h1>Welcome to SunMax</h1>

 <p>At Pure Heat Solutions, we specialize in providing top-quality heating installation services to help you get the most from your money. Contact us today to learn more about how a heat pump or underfloor heating could benefit your home or business!</p>

 <h2>Get an instant estimate with our easy-to-use tool! Click the widget in the bottom right corner to get started.</h2>

 <script src="https://heatpunk.co.uk/api/v1/shrunkpunk/loader?api_key=yourAPIkeyHere" type="module"></script>

 # no doubt you will have much more page content than this!

</body>

</html> 

 Custom launch widget 

 If you want another button on your site to open Shrunk Punk, add the class ‘get-started’ to it. For example: 

 <button class=get-started>Get an instant heat pump recommendation!</button> 

 To hide the standard launch widget, add the following style rule in a <style> section at the top of your page or in a linked CSS file:  #hp-start-div {display:none'}   

 

 That’s all you need to do! Shrunk Punk should now appear on your website, and it’s ready to start generating leads for you! 

 If you use a website building tool, such as Squarespace, or Wix, please read on for more guidance on how to embed the tool into your website. 

 Embedding with Wix 

 Wix allows you to embed code snippets into your website directly through the advanced settings. 

 Firstly, you’ll need to navigate to your website’s dashboard, then scroll down in the left-hand menu to Settings . Scroll to the bottom of the Settings page to the Advanced section where you should see Custom code . 

 Click on Custom code and then you’re greeted with three sections titled Head , Body - Start , and Body - End . You’ll need to click Add code under the Head section and insert the <script> tag from Heatpunk in there. Delete the type="module" part of the code snippet highlighted below. 

 

 You’ll be prompted to choose whether you want it to appear on all pages, or specific pages: choose Choose specific pages and then select the page(s) you want the tool to appear on from the dropdown options.Then click Apply . For more help, you can visit the Wix Help Center page about adding custom code . 

 

 Then, save your changes and publish your site. That should be it! You should now be able to see Shrunk Punk in your webpage! 

 Embedding with Squarespace 

 Squarespace also allows you to embed custom code snippets into your website directly through their editor. You have a couple of options on how to do this: 

 If you want it to appear on one particular page: 

 irstly you’ll need to hover over the page you want Shrunk Punk to appear on in the  Pages  panel. Then click the cog icon to enter the settings. Click  Advanced , there should be an option called  Page Header Code Injection  where you’ll need to add the  <script> tag from HeatPunk. Once you’ve added it, make sure you click  Save . 

 

 Note: Squarespace’s help page advises that “the code won’t appear if you turn off your site header’s transparency” in version 7.1. Please see their help page for more detailed information. 

 

 If you want it to appear on your whole site: 

 In the left-hand panel, scroll down to Utilities, and click  Website Tools . Then click Code Injection and paste the <script> tag into the  Header  box. Make sure to save your changes, and you should be all done! 

 If you need more detailed information, please see the Squarespace Help Center page . 

 That’s all! You should now be able to see Shrunk Punk in your webpage! 

 

 Embedding with WordPress 

 WordPress allows embedding of custom code content through the use of a free plugin called Insert Headers and Footers by WPCode. We can’t directly provide support for the installation and activation of the plugin, but here are the steps you’ll need to take after doing so. 

 If you want it to appear on your whole site: 

 In the WordPress admin menu bar, you should navigate to  Code Snippets  and then click  Header and Footer . Paste the <script> tag from HeatPunk into the Header text box, and then click the  Save Changes  button. 

 If you want it to appear on one specific page: 

 In the WordPress admin menu bar, go to the  Code Snippets section, and click Add New . Then, click Add your custom code (new snippet) and choose  Javascript  from the  Code Type  dropdown menu. Name the code snippet something appropriate like Shrunk Punk, and then paste the <script> tag into the  Code preview  area. Click  Save snippet when you’re done, and scroll down to the Insertion  section below. Then, you can choose to use Auto Insert  or  Shortcode . If you choose  Auto Insert , you’ll be asked to choose whether it runs on every page, or only on specific page(s).  Shortcode  will generate a shortcode for it which you’re then able to manually paste into any page(s) you want. When you’ve decided on a method, make sure you activate the snippet by clicking the  Active/Inactive  toggle in the top right corner. If you need further information, please consult the WPCode help pages . 

 

 

 If you use a different website creation service that we haven’t covered here and need some guidance, or you have any further questions, feel free to get in touch at help@heatpunk.co.uk .

Leads Dashboard
Where to find your leads? 

 Leads that have been submitted through the Shrunk Punk tool can be located in the Leads tab on the Heat Punk homepage. 

 

 To see the full details of the lead, click on the lead: 

 

 These details will include  

 

 the system summary  

 EPC or form data 

 Heat loss figures  

 Quick quote 

 Contact options 

 

 

 

 Following up leads 

 You can email your new leads directly through Heat Punk by clicking the contact button. This will bring up an email template which is fully customisable, with custom colours, and can be set up to come from your company email. 

 

 You can also send a customer a 'quick quote' using the quick quotation tool. Just navigate to the 'quick quote' tab, select the pump and cylinder you'd like to use and input any missing costs.  

 

 You can then send the quote as an email to the customer  

 

 Converting leads to projects on Heat Punk 

 It is quick and easy to convert a lead into a project on Heat Punk by clicking the 3 dots menu and then 'Convert To Project'. 

 

 From here you can complete the remaining tasks, send formal quotes and proposals and also order your kit from Midsummer Wholesale! 

 

 Wondering how to generate more leads through your website? 

 We recommend that you sign up to our free lead generation training session for useful tips on how to generate more traffic to your website and how to maximise results from leads!

How does Shrunk Punk calculate the heat loss for a property?
Shrunk Punk uses the information from a property’s EPC (or details you enter manually) to build a simple model of the home. It looks at the property type, age, floor area, and the descriptions of walls, roof, floor, and windows. From these, it assigns typical insulation values (known as U‑values) and estimates the size of each surface based on the building form. It then multiplies the surface areas by their U‑values to work out how much heat is lost through each part of the building, and adds them together to give the total heat loss per degree of temperature difference. Finally, this is scaled to the design temperature (for example, 21 °C indoors versus –3 °C outdoors) to give the overall heat loss in kilowatts, along with a breakdown showing how much is lost through walls, roof, floor, and windows. 

 Important note: Shrunk Punk is designed as a quick, indicative tool to give an early estimate of a property’s heat loss. It does not replace a full room‑by‑room heat loss calculation or account for ventilation/infiltration in line with CIBSE or MCS standards, which is required for system design and installation sign‑off.  

 If a user of Shrunk Punk submits their details at the end of the process, they'll show as a lead in the leads dashboard in Heatpunk. You can convert a lead into a full Heatpunk project and then do a detailed survey, floor plan and heat loss calculation.  Read this guide for more information about the Leads Dashboard.