Henry Reith

New Post has been published on https://henryreith.co/automatically-add-discount-codes-to-shopify-checkout/?utm_source=TR&utm_medium=HR+-+Tumblr&utm_campaign=SNAP%2Bfrom%2BHenry+Reith

How To Automatically Add Discount Codes to Shopify Checkout With Pure Javascript

Discount codes are a key part of most eCom & Shopify businesses’ marketing strategies. Whether you use them for Black Friday sales, to drive conversions for first-time sales, to increase retention or as part of an affiliate offer, they get a lot of use. So in this article, I’ll go through how to add discount codes to your Shopify checkout automatically for customers.

Shopify is an awesome eCom platform, but the discount code experience for customers can be a bit clunky. On mobile, the discount code box can be hidden so some customers miss it and on desktop customers have to type it and we know the more fiction there is the less likely it is someone will convert. Also when you give discount’s to customers or share them with affiliates, i always think it looks best if the URL is as short and relevant as possible. So i like to create url’s such as yourstore.com/discountname or yourstore.com/partnername, that then redirects to a full URL with UTM tracking and the discount information included.

So below, we’ll go through a neat JavaScript trick I created to automatically apply discount codes to a Shopify cart using URL query strings for my store Oh Crap. Essentially, when a user clicks a link or visits your store with a specific URL, the discount code embedded in that URL is automatically applied to their cart. No manual input needed! Now, let’s dive into how this works.

Automatically Add Discount Codes to Shopify Checkout Using Shopify’s Built-In Functionality

Before I share how you can automatically add discount codes to the Shopify cart from a query string parameter I want to point out Shopify does have a built-in function to add discount codes.

If you go to yourstore.com/discount/[discountcode]/ Shopify will automatically redirect you to the homepage and the discount code will be automatically added at checkout. So if a customer goes to yourstore.com/discount/Henry10/ the discount code Henry10 will be added at checkout & the customer will land on the homepage of your website.

And if you want to redirect customers to go to a particular page on your site, you can include a redirect parameter such as yourstore.com/discount/Save10?redirect=%2Fcollections%2Fall, which will mean customers land on your yourstore.com/collections/all URL.

You can read the full Shopify Docs on this functionality here.

There are also apps that add discount codes to Shopify checkout automatically, but that means that more JS files are added to your site. And slower loading times which are not good for SEO and usability.

However, that just doesn’t look good for customers and adds complications when it comes to adding UTM’s or any other parameters easily. It’s a lot easier to include the discount code in the direct score URL query string. So let’s go through a method to do this below.

Automatically Add Discount Codes to Shopify Checkout With Pure Javascript

Here is the full JS code to automatically add discounts to your Shopify checkout:

This will take the parameter from the discount= query string and add it automatically at checkout. So if your URL is yourstore.com/?discount=Save10 the discount code Save10 will automatically be added at checkout.

You can either add this to the bottom of your theme.liquid file wrapped in <script> tags, or i’ve added to my custom.js theme file.

Now let’s break the code down so you can see what’s going on:

Extracting the Discount Code

The first step in this process is to extract the discount code from the URL. This code could be a part of the URL in a format like https://yourstore.com/?discount=code. Here discount is a URL parameter, and code is the actual discount code.

var urlParams = new URLSearchParams(window.location.search); var discountCode = urlParams.get('discount');

In the code snippet above, we’re utilising the URLSearchParams API to parse the query string of the current URL (window.location.search). Then, using the get method, we fetch the value of the discount parameter, which is our discount code.

If there is a discount parameter in the URL, the rest of the code is executed.

Storing the Discount Code

The next step is to store this discount code for later use. We do this by saving it in a cookie.

document.cookie = `discount_code=$discountCode; path=/`;

We’re setting a cookie named discount_code with the value of our discount code. The path=/ option ensures the cookie is available across the entire website, so you can use it for elements such as notification bars.

Applying the Discount Code

The final step is to apply this discount code to the user’s cart. We achieve this by sending a GET request to the /discount/discountCode endpoint on our server.

fetch(`/discount/$discountCode`);

Here, fetch is a modern, promise-based API for making HTTP requests from the browser. This basically simulates the website visitor visiting Shopify’s automatic discount URL outlined above. This means we get to use all of Shopify’s built-in functionality to add the discount to the checkout automatically.

Conclusion

In this article, we’ve explored how to enhance the shopping experience on your Shopify store by automatically applying discount codes from URL query strings. We’ve broken down the process into three simple steps – extracting the discount code from the URL, storing it in a cookie, and applying it to the user’s cart.

With this knowledge, you can now create promotional links containing discount codes that are automatically applied when clicked by a user.

New Post has been published on https://henryreith.co/bhuman-ai-api-php-sdk/?utm_source=TR&utm_medium=HR+-+Tumblr&utm_campaign=SNAP%2Bfrom%2BHenry+Reith

An Easy-to-Use PHP SDK For The BHuman.ai API

Artificial intelligence (AI) is changing how we go about marketing our businesses, and BHuman is at the forefront of this transformation. BHuman.ai is an advanced AI-based video generation platform that allows us to create dynamic and personalised videos with ease. We’ve implemented the personalised videos BHuman creates in a number of places in our business during our customer’s buying journey, including in our abandon cart, onboarding and re-order sequence.

BHuman API is easy to use out of the box. However, BHuman’s API docs and examples are currently only written in Python & I wanted to integrate BHuman’s capabilities in a PHP stack. Plus we have a number of calls we want to make to the API so instead of having to rewrite code I decided to make an SDK for the BHuman API.

In this article, we will delve into a PHP SDK i have created for the BHuman API. This SDK speeds up the process of making HTTP requests to the API and provides you with a set of easy-to-use functions. It makes interacting with the BHuman API as simple as calling a method on an object.

The BHuman PHP SDK

Here is my full BHuman PHP SDK you need to include in your php script where you want to make calls to the BHuman API.

How To Use The BHuman SDK

Include the SDK

You can include the SDK in your script with a require once call:

require_once("./sdk.php");

Initialisation

Next, we need to initiate the BHuman PHP SDK. The SDK class requires your BHuman API key and secret for initialisation. These credentials are used to authenticate your requests to the BHuman API.

$api_key_id = "your_api_key_id"; $api_key_secret = "your_api_key_secret"; $bh = new BHumanSDK($api_key_id, $api_key_secret);

You can get your API credentials from your BHuman account.

Now we have our SDK initiated we can make calls to the BHuman API. I suggest checking the offical API doc’s to get more detail on the required and optional fields for each call.

Retrieving Video Instances

To fetch video instances, we use the getVideoInstances function. This function returns an array of video instances.

$video_instances = $bh->getVideoInstances();

Get a Specific Video Instance

To get a specific video instance you can use the getVideoInstance function. This function requires an instance ID e.g.

$instance_id = "7d859e18-dc89-446f-9718-9533bb178a75"; $video_instance = $bhuman->getVideoInstance($instance_id);

Generating a Video

To generate a video, we need an instance ID, a list of names, a list of variables, and a callback URL. Here is an example:

$instance_id = "7d859e18-dc89-446f-9718-9533bb178a75"; $names = [["Don", "Apple"], ["James", "Google"]]; $variables = ["name", "company"]; $video = $bh->generateVideo($instance_id, $names, $variables);

Get Generated Videos

To get a generated video, we’ll use the getGeneratedVideos class. This requires a instance ID as well.

$generated_videos = $bhuman->getGeneratedVideos($instance_id);

Get Workspace

To get your workspace setting we can use the getWorkspace class.

$workspace = $bhuman->getWorkspace();

Get Products

To get the products from the store with the getProducts class.

$products = $bhuman->getProducts();

Use A Product

To use a product in the BHuman store we can use the useProduct class.

$product_id = "example_product_id"; $workspace_id = "example_workspace_id"; $product = $bhuman->useProduct($product_id, $workspace_id);

Get BHuman Store Settings

To get the store setting in your BHuman account, you can use the getStoreSettings class.

$store_settings = $bhuman->getStoreSettings();

Conclusion

In this article, I’ve provided a robust PHP SDK for the BHuman API. This SDK simplifies the interaction with the API, providing a structured and object-oriented approach. We have covered how to initialise the SDK, retrieve video instances, and generate a video using this SDK.

New Post has been published on https://henryreith.co/carton-label-generator/?utm_source=TR&utm_medium=HR+-+Tumblr&utm_campaign=SNAP%2Bfrom%2BHenry+Reith

Free Online Carton Label Generator Using Google Sheets

In this blog post, I’ll share a free product carton label generator. You can generate new carton labels from a template at the touch of a button with it. It also allows you to make updates to your template anytime you want.

If you run eCom businesses like me (Oh Crap & Planet Hero), you are probably creating new carton labels all the time. Over the years, I’ve tried everything from a word doc in the early days to more recently using Adobe Illustrator to generate product carton labels. 

However, on each production run, we update our batch ID, which meant going in and editing lots of the templates one by one, which took a long time. Plus, we are adding a lot of new products, so I needed a way for anyone in the team to be able to generate labels without relying on me editing templates in Illustrator for each production run.

Watch the tutorial:

There should be a video here, but as javascript is not enabled on your browser the video can not be loaded. However, You can view it here:

https://www.youtube.com/watch/?v=QXcsD0p3HJo

So I came up with a way of generating carton labels for free online using Google Sheets. Using the Google Sheets carton generator means anyone in the team can update carton labels in just a couple of clicks & they are super easy to maintain.

What Are Product Carton Labels?

You place product carton labels on the outside of product cartons. They typically contain essential information about the product, such as the product name, manufacturer, weight, and any relevant warnings or instructions. Plus, you are likely to include where the product is made and a short description for customs, e.g. ‘dog poop bags’, on them.

Why Are Product Carton Labels Important?

Carton labels are used to help identify and organise products and to provide important information to consumers. They are an essential part of the packaging process for many products.

Also, product carton labels help to organise products and ensure that they are correctly distributed and sold. By clearly identifying the product, carton labels help retailers and distributors stock and sell the product and ensure that it reaches the intended customers.

Thirdly, product carton labels can be a key part of product branding and marketing. They provide a visual representation of the product and the company that produces it and help to build brand awareness and recognition.

Also, in our case at Oh Crap & Planet Hero, we print a unique batch ID on each manufacturing run. The Batch IDs make each carton easy to identify in the warehouse at the carton level instead of having to unpack all the individual items inside to find the batch ID, making inventory management super easy. 

How I Used To Manage & Maintain Carton Labels

Microsoft Word

In the early days, I tried using an MS word template to create a carton label. One plus was that anyone in the business could edit them. However, for each new production run, we had to go into each MS Word template and update the Batch ID, which got messy to maintain. If you only need to make one carton label, this can be a great solution that takes 30 secs to do, and they can easily be saved as a PDF.

Here is my template if you want it to create a one-off carton label: https://docs.google.com/document/d/1blr2VO41bHmp_mzLL_OppytLsoemd4hI/edit

Adobe Illustrator

I also tried making one giant Illustrator file with lots of artboards, each with a specific carton label on. However, as we added products, I ended up copying and pasting artboards endlessly, and there was no quick way to update batch ID’s on each label and export it. It also ended up being a mess, and I recommend not doing it this way.

Neither option was a good long-term solution. So recently, I came up with a way to create carton labels online using Google Sheets & Docs, meaning they can be easily maintained, generated & anyone and in the team can do it:-

Free Carton Label Generator

To maintain our carton labels long term and generate new carton labels PDFs at the touch of a button I coded a script you can use with Google Sheets.

How Does It Work?

It merges the information on your master spreadsheet with all your carton information to a carton label template created in Google Docs and then exports a PDF.

Sheet Titles To Merge Tags In The Carton Label Template

The script looks at the title of each column in the sheet. Then merges the information in the row into the Google Doc template. It simply looks at each title in the Google Sheet, and if a corresponding merge tag exists in your template with curly brackets around ““ “”, it merges that information & saves the resulting file as a PDF. 

Setup The Files & Folders For The Carton Label Generator 

The online carton label generator requires a couple of things to get it running:

1. Carton Label Generator Sheet

Download a copy of the carton label generator sheet here: https://docs.google.com/spreadsheets/d/1yZVnZuxi2iVzfNXODwv3GaidkrR6m7mnWWBzH_rBVpg

2. Carton Template Document

You can download my carton label template here: https://docs.google.com/document/d/13VtGldA5EbbKkau1mLL3s3bCtpgjIVdT5uzYbgIrXyc. I have left the table borders as black lines in this example so you can easily see how to edit it and resize the boxes to fit your needs. But I suggest changing them to white when you are happy with it. Or you can make your own template.

3. PDF Output Folder

Create a PDF output folder. This is the folder where the final PDFs will be saved.

When generating the PDFs, the script creates a copy of your carton label template for a couple of seconds to merge everything. This temp document is only stored for a few seconds in the PDF folder before being saved as a PDF, then is automatically deleted.

Quick Suggestion

I suggest setting up a folder exclusively for the task of generating the carton labels. Here is the folder I use for Oh Crap.

How The Folder Structure Should Look

I created a public carton generator folder for this tutorial with all the above items you can use for reference: https://drive.google.com/drive/folders/1KlVCwt4OSFT9lcDmKf3YbuusheoQszDs. 

Note: You can’t download the contents of this tutorial folder, as this will lose the script that is saved in the sheet – Instead, you must copy the sheet & my carton label templates to your drive directly and set up the folders manually.

Set Up The Label Generator Sheet

The setup page of the sheet

When you have copied the files and folders to your drive, open the sheet. On the first sheet titled ‘Setup’ you will see several yellow boxes you can edit. You MUST update the ID of the carton template document and the ID of the final PDF folder you have created. You can find the IDs of the document & folder by opening them in your browser and getting them from the URLs.

This is the folder ID

This is the document ID

Setting the barcode size & document width and height can be a bit of trial and error. I’ve found that the measurements I have in there now work for our templates, but if you use a different design, you may want to change them.

Why the width & height settings? You can’t set custom document sizes in Google Docs, so you may end up with labels with lots of white space around your labels if your labels are different from the standard paper sizes pre-loaded into Google Docs. So the measurements are the output size of the PDF. The script first gets the template doc, then chops the final PDFs down to the size you set here. So if you need more space, increase the value, or if your template has too much white space around it in the final PDF, make these values smaller.

Reference Batch ID in Label Data Sheet

If you need to print a Batch ID on your carton labels, you can set the Batch ID to the ID you want to use for this set of carton labels. Then use that as a constant in the ‘Label Data’ sheet.

Add The Label Data

All label data is kept on the ‘Label Data’ sheet. All of the merge fields start from column C across.

Column A

Column A is reserved for you to add a Y for each row you want to generate a carton label for on that run. This is useful as you may not want to generate every carton label in your sheet every time you run it. If you don’t need to generate a label on this run, simply leave it blank. This column must be titled ‘Generate_Label’ as this is the name the script is looking for to know if it should create a carton label on this run. 

Column B

In column B of the ‘Data Label’ sheet, enter the name you would like to call the final PDFs. I use the format: [Item SKU] – [Batch ID] – Carton Label. This column must be titled PDF_File_Name as this is the name the script is looking for to name your PDFs. 

Including Barcode / Images

If you want to merge images into your carton template, such as barcodes, you can.

When you create your merge tag name, finish it with ‘_Img’ (case sensitive), and the script will know you want to output an image into the carton label. Then include the full Google Drive link of the barcode/image in that cell.

Google Docs only allows you to merge .JPG’s/JPEG’s and .PNG’s into documents – I strongly suggest using .PNG’s for the carton generator as they are the higher-quality image that will make your barcodes easier to read. If anyone knows how you can add .SVG’s or other vector formats into Google Docs, please leave a comment below, and I’ll add it to the script. 

My workaround to ensure any image I merge into the document is as high quality as possible is to save them at 450dpi; then, when it’s merged into the PDF and printed, it should be crystal clear.

Notes: I have tested this script with images I have full edit access, and everything works as expected. I’ve also tested the script once with view-only access to an image, and it worked, but your mileage may vary. You will know if the script fails when it merges the image as it will simply stop the script and you will find the half-created copy of your template in the PDF folder. You don’t have to store the images in the same directory as this sheet ( I save our barcodes into their product spec folders); make sure it’s somewhere in the shared drives that you can access. 

Also, i’ve found that the script doesn’t deal with images over 3000px in either direction very well, i’m not sure why, but my barcodes are normall around 1800px wide so it’s not an issue. 

How To Generate The Carton Labels

When you have added all the information you would like merged into the final PDFs, add a Y in column A for all the labels you would like created. Click the ‘🏷️ Carton Labels’ menu item, then click ‘Create Labels’. This will generate the carton labels and save the PDFs to your output folder.

It takes around 20 secs for each label to generate & save, so be patient if you are creating lots of labels.

Like any Google Drive script, the first time you run the carton label generator script, you will be required to approve its access to your drive. Just click approve and then click the Create Label option again to run it.

Conclusion 

In this article, we’ve gone through how to generate carton labels using Google Sheets. Not only does this make it easy to generate carton labels, but it should also make it a lot quicker to create the information that is required to go on each label.

You may have also noticed this script is essentially a merge sheet to PDF script, so it could be used to create anything that you need mail merged PDFs for. And you can easily add to the script to send the resulting PDFs in an email. Let me know if you want me to write that extra function.

If you have found this script helpful, feel free to share it with your friends in eCom, who might find this useful too.

New Post has been published on https://www.youtube.com/watch?v=aO_m3IfdAU4&utm_source=TR&utm_medium=HR+-+Tumblr&utm_campaign=SNAP%2Bfrom%2BHenry+Reith

New Post has been published on https://henryreith.co/open-multiple-programs-at-once-on-windows/?utm_source=TR&utm_medium=HR+-+Tumblr&utm_campaign=SNAP%2Bfrom%2BHenry+Reith

3 Easy Steps To Open Multiple Programs At Once On Windows

In this article, I am going to go through how to open multiple programs at once on Windows with just 1-click.

There are many tasks I do every day that mean I have to open a few programs at once to achieve them. Some examples are:

Open our content marketing folder, Microsoft Word & Photoshop when I want to edit a contributor article for Fridge Magazine,

Open my development environment and coding programs,

Open MP3 Skype Recorder every time I open Skype, so it automatically records calls.

A few months ago I got a new Microsoft Surface Book.

https://www.instagram.com/p/BHza15rBA2v/

With a new computer in hand, I set myself the challenge of finding ways to automate as many tasks as possible.

One of the areas I knew I could save a lot of time was by automatically opening multiple programs at once with just 1-click. This is especially useful when I want to open my coding development platform, as that involves opening 5 programs each time.

In the article below I will go through how I have achieved this by creating a batch file.

Don’t worry if the idea of coding a batch file sounds complicated; I found it a lot easier than I thought, and I am sure you will too.

Quick Tip: Keep Your Batch Files Organized

If you are anything like me and like to keep files organized and easy to find on your computer, I suggest creating a folder in your documents folder just for automation files. I have a few programs on my Surface I use to automate my workflow, so inside of my automations folder, I have created a folder just for batch files.

Below is an example of the folder set up I use:

Automation Folder inside of My Documents Folder

How To Open Multiple Programs At Once On Windows

I will now take you through the steps I took to create a batch file to open all the default programs I use when I am coding my websites with just 1-click. You can apply the following steps to any set of multiple programs you want to open with 1-click on Windows 95 through to Windows 10.

1. Create The Batch File To Open Multiple Programs

First, open your favorite text editor. I use Sublime Text 3. However, Windows Notepad will also work just fine.

Next, I create a new document in my text editor and save it as a batch file to my automations folder (mentioned above) with a relevant name. To save a file as a batch file, we need to save it with the file extension .bat. For this example, I will name it web-design-default-programs.bat.

It’s best practice to name batch files without any spaces in, so I replace spaces with hyphens.

By default when you run a batch file the command window will pop up, and it will log each action as it is carried out. This can be great for when you are developing a script. However, in most cases, we don’t want to see what’s going on, so we add @ECHO OFF to the first line of the batch file. Adding @ECHO OFF means it will now show the command window while it carries out the actions.

Next, let’s tell the batch file we want to open a program. We do this by starting a line with the word START in capital letters. Then we follow the START command with the name of the .exe file with quotes around it e.g. "sublime_text.exe". You can find the name of the programs .exe file inside the relevant folder in your Program Files or Program Files (X86) folders.

Identifying the .exe program file

After “program.exe” we add a space, then add the full file path to the program .exe for example "C:\Program Files\Sublime Text 3\sublime_text.exe".

If you are on Windows 10, you can get the full file path to a folder by opening a File Explorer. Then highlighting the file you want the full path for, and clicking the ‘Copy Path’ button in the File Explore options bar. Clicking this button will copy the file path to the clipboard and you can paste it into the batch file.

The Copy Full Path Button in Windows File Explorer

Now you have added all the commands needed to open a program from a batch file; the line should look like this:

START "sublime_text.exe" "C:\Program Files\Sublime Text 3\sublime_text.exe"

If we have done everything right so far it should look like this:

@ECHO OFF START "sublime_text.exe" "C:\Program Files\Sublime Text 3\sublime_text.exe"

With this basic command in the batch file, it’s time to test it. First save your works so far, then go to the batch file and double click it.

When you double click the batch file your program should now open. In my case Subline Text opens, so great, everything is working so far.

At this point, we haven’t done much more than create a shortcut to a program. So next, re-open your batch file and add new lines with commands to open more programs.

Having added all of my default development programs my batch file looks like this:

(Note: the commands to open a URL in Chrome, are different than opening a regular program on your computer. I’ll explain the exact commands to open URLs in a future blog post)

Now, let’s test our final batch file. If everything works correctly, the batch file will open all of the programs you want at once when you click it.

2. Create A Shortcut To The Batch File

Now I have created the batch file to open multiple programs at once; I want to make sure it is easily accessible for me.

First, we want to create a shortcut to the batch file so that we can place the shortcut anywhere on our computer. The easiest way to create a shortcut is to go to your batch file in the File Explore and right-click it.  Hover over the ‘Send To’ option, then click ‘Desktop (Create shortcut)’. This will create a shortcut to the batch file on your desktop.

Next lets, add an icon to make the shortcut look better and more importantly, be more descriptive when we are skimming reading our menu options. To do this right-click the shortcut icon and click the Prophecies menu option. Then click Change Icon button from the Shortcut tab to open up the icon options window.

When the icon options open up, it shows the system default icons that in this case is fine as I will use a folder to represent the batch file actions. However, if you want to use another icon you can either create your own or use the icon of a program already installed on your computer. Just browse to the folder where the icon you want is stored and select it.

Changed Shortcut Icon

At this stage, I am going to rename my shortcut to something i would expect to find in the programs folder. For this example, I am going to use: “Web Dev Programs”

Now with the shortcut created we can place the shortcut where ever is easily accessible for us on our computer. For me, this is going to be the quick access tiles (awesome feature) on the Windows 10 start menu.

Sidenote: If you are one of those people who keeps all their shortcuts on their desktop, the desktop clutter has the same negative impact on your productivity as physical cutter. Hopefully using this method of creating shortcuts will help you optimize your workflow. It is well worth spending 2 mins to put everything in the Quick Access start menu in Windows 10 or shortcut’s menu on Windows 7 and below.

3. Add The Shortcut To The Start Menu

Now we have the shortcut to the batch file we can add it to the start menu or the quick access menu.

The first step we need to take is to add the shortcut into the start menu folder on our computer. You can access it by opening a File Explore window and going to:

C:\ProgramData\Microsoft\Windows\Start Menu\Programs

Or if you have changed the default setup of your computer you can access the Start Menu Programs folder by going here:

%ProgramData%\Microsoft\Windows\Start Menu\Programs

In this folder, you will see all the folders and programs shortcuts in your start menu. Now move the shortcut your have created from your desktop into this folder, and exit the File Explorer.

Tip: You can open the File Explorer by clicking the Windows Key + E at the same time.

Next, open the start menu, and you will see the shortcut in there.

Now right click the shortcut in the start menu, and click the ‘Pin To Start’ option. This will put it in the Quick Access tiles area.

Adding Shortcut To Quick Access Tiles

Now, we are complete. You can now open multiple programs in Windows with just 1-click. Just open the start menu and click the shortcut and it will open all the programs you added to the batch file will open.

Tip: You can open the start menu by clicking the Windows Key.

BOOM! The possibilities are endless.

Taking Batch Files & Opening Multiple Programs At Once To The Next Level

In this article, I have covered the basic’s to get you going. However, There are many more commands you can add into batch files to automatically do actions for you. If you are interested in seeing more advanced ways to use batch files to open multiple programs at once, I will release a more advanced guide soon.

If you are interested in learning more about the basics of batch files, I highly recommend checking g out Steve Jansen’s great ‘Getting started with batch files’ guide.

Conclusion

In this article, I have gone through how to use a batch file to open multiple programs at once. And I hope I have given you the inspiration to try it yourself.

The steps shown above are quick and easy to replicate. So next time you find yourself having to open multiple programs to complete a task repeatedly, maybe it’s worth spending 2-minutes to create a batch file and save yourself hours in the long run.

New Post has been published on https://henryreith.co/leadpages-leadboxes-plugin/?utm_source=TR&utm_medium=HR+-+Tumblr&utm_campaign=SNAP%2Bfrom%2BHenry+Reith

1-Click LeadPages LeadBoxes For Wordpress (Free Plugin)

In this article I will show you how you can insert LeadBoxes in WordPress just 1-Click, using the free LeadPages LeadBox Shortcode Plugin for WordPress.

1-Click LeadBoxes in WordPress

Yes. Download The Free Plugin

LeadBoxes can be really fiddly to insert into your WordPress content, especially for clients who aren’t confinable looking at code. And even if, I as a coder can get the right code into WordPress, WordPress is notorious for erasing it when you next save a post.

However, LeadBoxes from LeadPages are one of the most effective ways to get people on your list, and is where a lot of my new contacts come from. So I went decided to:

Create an easy way to insert LeadBoxes in WordPress (for coders and non-coders alike).

Make it super easy to style LeadBox Call To Actions (CTA’s) So they are consistent across all content.

Note: Before we go on, ‘LeadPages’ and ‘LeadBoxes’ are all trademarks of Avenue 81 Inc. And you will need an LeadPages account (that you can get here) to use this plugin.

What Are LeadBoxes?

In the early days of online marketing marketers, it would be common to see a basic form asking for a name and email. Basic form’s was the way it was done for ages. This set up is known as a one-step opt-in process.

OMG! how ancient does the below example look:

Single Optin

Then as online marketing started to take more inspiration from the basic physiological principles of the years of direct marketing research it became more of a trend to create ‘micro yes’ commitment ladders to increase opt-ins.

https://www.youtube.com/watch?v=N7LH2vbtxwU

This 2-step opt-in set up was hard to implement in the average landing page quickly. And 2-step options were even harder to implement in a larger pieces of content.

Then in 2013 that all changed. LeadPages introduced LeadBoxes.

https://www.youtube.com/watch?v=AHYqoI9uX-k

LeadBoxes allowed us to easily implement 2-step opt-ins with no coding skills at all. So because the 2-step opt-in, LeadBoxes system creates a micro-yes, using they push up conversion rates.

And it isn’t just the pure opt-in numbers that increase when we use a 2-step option. In every test I have run on clients sites, removing all necked opt-in form boxes from their sites reduces bounce rate between 10 -20%.

Now LeadBoxes are used almost everywhere including:

On landing pages

In-content as plain link

As call out boxes for content specific content

Sidebar banners

End of content cta

As a ‘application’ / contact form

And more

Generally LeadBoxes are used in the process of someone opt-into your list in return for an opt-in bribe.

Leadboxes & WordPress

A lot of my optins come through a LeadBox somewhere on my site/landing pages. And like most marketers I use WordPress to run my company and every client I work with has a WordPress website. So in an ideal word, it would be awesome if they worked together easily :).

Well, unfortunately, it’s not an ideal world.

An example of the code that is needed to insert a LeadBox looks like this:

<a href="https://subdomain.leadpages.co/leadbox/147012873f72a2%3A175dec95fb46cd/5681034041491654/" target="_blank">Click Here to Subscribe</a><script data-leadbox="147012873f72a2:175dec95fb46cd" data-url="https://subdomain.leadpages.co/leadbox/147012873f72a2%3A175dec95fb46cd/5681034041491654/" data-config="%7B%7D" type="text/javascript" src="https://subdomain.leadpages.co/leadbox-1011.js"></script>

To insert a LeadBox in WordPress you have to change the text editor section from ‘visual’ to ‘text’. Then in the text editor, you insert the LeadBoxes code.

Inserting A LeadBox In WordPress

This is easy if you are happy looking at code. However for many clients i have and non-tech savvy users, this can be intimidating.

Plus, the biggest thing is that WordPress has a habit of removing the script part of the code when the post is saved. This leaves the LeadBox links in the article broken and not working. This has happened to me so many times.

So here is my solution that makes it super easy to insert LeadBoxes with great looking CTAs in WordPress.

Free LeadPages LeadBox Plugin – 1-Click LeadBoxes For WordPress

What The Plugin Does For You

This LeadPages LeadBox plugin simply allows you to insert LeadBox code into WordPress with just 1-click. It also has many different style options, so you can create the perfect call to action (CTA).

How It Works

It is like any other plug-in that you upload WordPress and activate.

When the plug-in is ready to use you will be able to add shortcode around anything on your site that you want to add a LeadBox too.

The very first step to get going is to go to the plug-in settings page and add your individual link to the lead boxes JavaScript.

Adding Your Individual LeadBoxes JavaScript To The Setting Page

To get the link to your individual LeadBoxes JavaScript file sign in to LeadPages, and go to the LeadBoxes menu. Now get the full LeadBoxes script as you would if you inserting it in a page.

The full script should look something like this:

Example LeadBox Code

and we just want the link to the LeadBox JS, so the bit after the src= text:

<a href="https://subdomain.leadpages.co/leadbox/147012873f72a2%3A175dec95fb46cd/5681034041491654/" target="_blank">Click Here to Subscribe</a><script data-leadbox="147012873f72a2:175dec95fb46cd" data-url="https://subdomain.leadpages.co/leadbox/147012873f72a2%3A175dec95fb46cd/5681034041491654/" data-config="%7B%7D" type="text/javascript" src="https://subdomain.leadpages.co/leadbox-1011.js"></script>

Now, go to the plug-in settings page, that you can find under the settings menu and add the script in the box.

Access Setting Menu

And add your individual LeadBox script here:

LeadBox ShortCode Options Page

Now the LeadPages LeadBox plugin is ready to use.

The ShortCode To Inset LeadBoxes In 1-Click

Now, to add a lead box to anything on the site we just need to wrap the shortcode around it.

The basic shortcode is:

[ hrm_optin_2_step href="#"][/hrm_optin_2_step]

NOTE: Through all of these examples i am leaving a space after the opening bracket of the shortcode examples so the shortcode (that i use on my website) isn’t rendered. When you use them you should not leave a space after the opening bracket of the shortcode e.g

[hrm_optin_....

And with real life options in, it looks like this:

[ hrm_optin_2_step href="https://subdomain.leadpages.co/leadbox/147012873f72a2%3A175dec95fb46cd/5681034041491654/"]Click Here to Subscribe[/hrm_optin_2_step]

the above code will just make the ‘Click Here to Subscribe’ text a clickable link the pops up a LeadBox as normal.

Basic Text Link CTA

However, there are many inbuilt styles to bring attention to your CTA that you can use. I will cover these options below, in the Call to Action Styles section.

Required ShortCode Options

The only option that must be included in every shortcode is the href link. This is the individual link that LeadPages gives us so it can identify which lead box to load.

We simply want to copy the href from the normal lead boxes code:

<a href="https://subdomain.leadpages.co/leadbox/147012873f72a2%3A175dec95fb46cd/5681034041491654/" target="_blank">Click Here to Subscribe</a><script data-leadbox="147012873f72a2:175dec95fb46cd" data-url="https://subdomain.leadpages.co/leadbox/147012873f72a2%3A175dec95fb46cd/5681034041491654/" data-config="%7B%7D" type="text/javascript" src="https://subdomain.leadpages.co/leadbox-1011.js"></script>

Then include it as a shortcode attribute like this:

[ hrm_optin_2_step href=" https://subdomain.leadpages.co/leadbox/147012873f72a2%3A175dec95fb46cd/5681034041491654/"]Click Here to Subscribe[/hrm_optin_2_step]

From this basic information, the shortcode will add all of the rest of the information needed (including the script) to the link.

Quick Add WYSIWYG Button

So we don’t have to remember the shortcode every time you want to use in their is a 1-Click button in the WYSIWYG editor that takes care of it all for you.

When the plugin is activated you will see the LeadBox icon is added to the WYSIWYG text editor. So when you want to insert a LeadBox all you have to do is select the text you want to turn into a LeadBox and click the LeadBox icon.

1-Click LeadBoxes in WordPress

Yes. Download The Free Plugin

Notes

The plugin allows you to add and use the LeadBox shortcode anywhere in your theme. However, if you would like to use the shortcode in a WordPress widget, you will need to make sure your theme is enabled to allow shortcodes to work in widgets.

Call To Action Styles

Plain Text

Basic Text Link CTA

By default, when you add the LeadBox shortcode around any text it will create a plain text link.

Using Image As CTA

Using A Image As A CTA

We can use an image as a LeadBox CTA. To do this we just have to wrap the shortcode before and after the image.

Callout Box

Default Callout Call To Action

We can create callout boxes that as said above are very popular among content marketers to give free downloads related to the article.

Example:

We can create this style by adding the tribute type=”callout” to the shortcode.

For example:

[ hrm_optin_2_step href=" https://subdomain.leadpages.co/leadbox/147012873f72a2%3A175dec95fb46cd/5681034041491654/” type="callout"]Click here to subscribe[/hrm_optin_2_step]

By default the callout box has a yellow background. However, we can also change it to either green or blue.

To add a green background, add to the attribute color=”green” to the short code.

Green Callout CTA

[ hrm_optin_2_step href=" https://subdomain.leadpages.co/leadbox/147012873f72a2%3A175dec95fb46cd/5681034041491654/” type="callout" color=”green”]Click here to subscribe[/hrm_optin_2_step]

And to make the background blue simply change the color attribute to blue.

Blue Callout CTA

[ hrm_optin_2_step href=" https://subdomain.leadpages.co/leadbox/147012873f72a2%3A175dec95fb46cd/5681034041491654/” type="callout" color=”blue”]Click here to subscribe[/hrm_optin_2_step]

Custom CSS

If we want to get advance and style the LeadBox CTA using our own CSS code we can. We can add our own classes to the CTA by including the attribute class=.

For example:

[ hrm_optin_2_step href=" https://subdomain.leadpages.co/leadbox/147012873f72a2%3A175dec95fb46cd/5681034041491654/” class=”myclass1 myclass2”]Click here to subscribe[/hrm_optin_2_step]

Then, his classes are added to the class of the link as you can see below:

Custom Classes In CTA

We can also combine the class= attribute with other styles such as the callout.

[ hrm_optin_2_step href=" https://subdomain.leadpages.co/leadbox/147012873f72a2%3A175dec95fb46cd/5681034041491654/” type="callout" class=”myclass1 myclass2”]Click here to subscribe[/hrm_optin_2_step]

Other Styles

As I keep developing the plug-in I will continue to add more styles based on your feedback. So if there’s a LeadBox CTA style you want see, add it in the comments below and I’ll add it into the plug-in.

Free Download

You can download the 1-Click LeadBoxes Shortcode for WordPress below.

Yes. Download The Free Plugin

Conclusion

In this article, I have shown you how to use the free WordPress plugin. Plus given it as a free download.

If you haven’t picked up the plugin already you can here.