Uploading your own Nugget design is a quick and easy way to turn your designs into a functional Nugget right inside your Dashboard with just a few clicks, no coding required.
Before Getting Started
This feature is a great tool to layer functionality on top of an image you already created. Note that it is NOT meant for editing the image inside the Nugget builder. This means that the image you upload should already contain the following elements:
- A call-to-action button ("Sign Up"/"Buy Now"/"Join")
- Empty rectangles in place where your fields will go. IMPORTANT!! DO NOT INCLUDE THE FIELD PLACE HOLDERS IN YOUR FINAL DESIGN THAT YOU UPLOAD. These are elements you will code in from inside the 40Nuggets Dashboard. Before uploading your design, make sure the fields are blank.
- We recommend NOT using a Nugget design with a white background as the placeholder text and background may be difficult to see.
Example:
File Size/Dimensions:
Size: For best results, keep your file size under 200kb.
Dimensions:
Desktop
Width: 500-550 px in width is usually ideal, as this fits the screen while still leaving the underlying site visible. Height: anywhere from 350 px-400 px. Smaller or larger (up to 800 x 600 px max) is also possible.
DESIGNING FOR MOBILE
40Nuggets auto-resizes your Nuggets for Mobile, but it's ideal to design separate Nuggets that are Mobile optimized. Design for portrait state (mobile can switch portrait and landscape). Rule of thumb: keep it below 300px width and 500 height.
How to Upload Your Own Design:
- In the Nuggets section of your Dashboard, add a new Nugget.
- Choose a sign up opportunity to offer your visitors (Newsletter, coupon, etc.) This will open the Nugget Shape window.
- Click "Upload your own design" (the plus icon) to upload your JPG or PNG file. You will then be redirected to the design editing page.
- Name your Nugget something that will remind you of its function before continuing on to layer functionality on your design.
How to Layer Functionality on your Design:
Position:
Choose where on the screen you would like your Nugget to appear - front and center, or sliding up from either side.
Modal overlay (background):
This determines how the website will look in the background of your Nugget. Best practice is to choose black or white, with medium opacity, so that your offer stands out but isn't too distracting.
It is not advised to disable the modal overlay option. If the Nugget appears directly on your site without any background change, it will not stand out, and therefore will not likely convert any visitors.
Example:
With faded background:
Without faded background:
Program your input fields and Nuggets in the correct tabbing order:
- If your Nugget has more than one input field, program them in consecutive order.
- Then program the CTA (Call to Action) button.
- The Dismissal button (X in the top corner/ "No, Thanks" button) should always be programmed last.
Adding Input Fields:
- Click Add Input Field. A dotted box will appear on your image.
- Define the type of information you'd like to collect (email, name, etc.)
- Edit the placeholder text (the instructional text that will appear in the field) to reflect the information you wish to collect.
**Note: Best practice is to use placeholder text that reflects the information type exactly. For instance: "Email" or "Enter your email" is good; "Leave us your details!" is bad. Save catchy text and calls-to-action for the Button Text. - Choose whether or not to require submission of the field in order to complete conversion.
- Drag the dotted box to cover the input field on your image, and re-size it to fit precisely, using the gray triangle icon in the bottom right corner of the box.
- Follow the same instructions for adding a Text Area (for longer text submissions, such as customer feedback, questions, comments. etc.)
Adding Buttons:
There are 2 types of buttons you need to add to your Nugget to make it functional: One to trigger a Conversion and one for a Dismissal. *NOTE: It is very important to define the buttons correctly, to ensure accurate click tracking.
To Add Trigger a Conversion Buttons:
- From the menu on the left, enter the Button tab.
- Click Add Button. A dotted box will appear on your image.
- From the Action drop down menu, choose Trigger a Conversion.
- Drag the dotted box to cover the button on your image, and re-size it to fit, using the gray triangle icon in the bottom right corner of the box. Note: leave some padding around the button design to allow room for stray clicks.
To Add a Dismissal Button:
- Click Add Button. A dotted box will appear on your image.
- From the Action drop down menu, choose Dismiss Nugget.
- Drag the dotted box to cover the Dismissal button on your image (the "X" in the top corner, or a "No, Thanks" button in the body of your Nugget), and re-size it to fit, using the gray triangle icon in the bottom right corner of the box.
Note: leave some padding around the button design to allow room for stray clicks. - Once you have programmed all fields and buttons, and edited the name, click Next to toggle through and save your Nugget.
