Coding your own Nugget is an excellent way for tech savvy webmasters, marketers, and agencies to get more hands on control of the design and functionality of the Nuggets. It allows you to develop your own on-page interactions while still benefiting from 40Nuggets' targeting tools and built-in intelligence. You can also deploy 3rd party JS driven interactions (i.e., a chat program like Zopim) to the page through 40Nuggets, again, benefiting from targeting and intelligence.
To code your own Nugget:
- Click the menu icon in the upper left hand corner to open the menu sidebar.
- Choose Nuggets. This will open your Nugget list where your Nuggets live.
- In the top right corner, click Add Nugget.
This will open the ADD A NEW NUGGET window.
- Choose Code. This will redirect you to the CODE YOUR NUGGET page.
- At the top of the page, click the EDIT icon and name your Nugget.
- Paste your HTML, CSS, and Javascript in the appropriate tabs.
- Toggle through to the Configure step, configure the Nugget settings as necessary, and click Save.
Example of HTML:
<div data-popup="true" data-modal="true" data-position="center">
<div class="fn-container">
<div class="fn-body">
<div class="fn-close">
<img src="//40nuggets.com/themes/assets/close2.png" alt="x" />
</div>
<div class="fn-main">
<div class="fn-inner-container">
<div class="fn-h1" data-fn="line1">BEFORE YOU LEAVE</div>
</div>
</div>
<div class="fn-text">
<div class="fn-inner-container" data-fn="line2">Would you like to join our list to receive special
discounts?</div>
</div>
<div class="fn-form">
<form action="" class="fn-inner-container">
<div class="fn-inputs">
<div class="fn-input">
<input type="text" placeholder="Name" data-fn="input1" data-key="name" />
</div>
<div class="fn-input">
<input type="text" placeholder="Phone" data-fn="input2" data-key="phone" />
</div>
<div class="fn-input">
<input type="text" placeholder="Email" data-fn="input3" data-key="email" />
</div>
</div>
<div class="fn-submit">
<input type="submit" value="JOIN" data-fn="submit" data-trigger="conversion" />
</div>
</form>
</div>
</div>
</div>
<link href="//fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet" type="text/css" />
</div>
Example of CSS:
.fn-container,
.fn-container *,
.fn-container *:before,
.fn-container *:after {
-webkit-box-sizing: border-box !important;
-moz-box-sizing: border-box !important;
box-sizing: border-box !important;
background: transparent !important;
border: 0 !important;
margin: 0 !important;
padding: 0 !important;
text-align: left !important;
direction: ltr !important;
text-transform: none !important;
letter-spacing: 0 !important;
float: none !important;
width: auto !important;
}
.fn-container form {
margin: 0 !important;
display: block !important;
}
.fn-container input {
-webkit-background-clip: padding-box !important;
-moz-background-clip: padding-box !important;
background-clip: padding-box !important;
-webkit-border-radius: 0 !important;
-moz-border-radius: 0 !important;
border-radius: 0 !important;
display: inline !important;
opacity: 1 !important;
}
.fn-container input:focus {
opacity: 1 !important;
}
::-webkit-input-placeholder {
opacity: 0.85 !important;
}
:-moz-placeholder {
opacity: 0.85 !important;
}
::-moz-placeholder {
opacity: 0.85 !important;
}
:-ms-input-placeholder {
opacity: 0.85 !important;
}
.fn-container input[type="submit"] {
cursor: pointer !important;
-webkit-border-radius: 0 !important;
-moz-border-radius: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
.fn-container img {
border: 0 !important;
}
.fn-reset,
.nugget-preview {
max-width: 400px !important;
width: 100% !important;
}
.fn-container,
.fn-container * {
font-family: 'Lato', serif !important;
outline: 0 !important;
}
.fn-container {
position: relative !important;
max-width: 400px !important;
padding: 14px !important;
margin: 0 !important;
background: #ffffff !important;
border: 1px #000000 solid !important;
-webkit-border-radius: 12px !important;
-moz-border-radius: 12px !important;
border-radius: 12px !important;
}
.fn-body {
position: relative !important;
background-size: cover !important;
background: url('//40nuggets.com/themes/assets/jupiter-bg.jpg') no-repeat bottom center !important;
}
.fn-inner-container {
padding: 20px !important;
}
.fn-close {
position: absolute !important;
top: 6px !important;
right: 8px !important;
z-index: 99999 !important;
cursor: pointer !important;
line-height: 0 !important;
}
.fn-main {
font-size: 40px !important;
color: #ffffff !important;
color: #ffffff !important;
position: relative !important;
padding-top: 10px !important;
margin-bottom: 10px !important;
}
.fn-main .fn-inner-container {
margin-left: 7px !important;
}
.fn-h1 {
font-size: 36px !important;
line-height: 60px !important;
font-weight: 300 !important;
text-align: left !important;
display: inline !important;
background-color: #18ba60 !important;
background-color: #18ba60 !important;
-webkit-box-shadow: -6px -6px 0px 0px #18ba60, -6px 6px 0px 0px #18ba60, 6px -6px 0px 0px #18ba60, 6px 6px 0px 0px #18ba60 !important;
-moz-box-shadow: -6px -6px 0px 0px #18ba60, -6px 6px 0px 0px #18ba60, 6px -6px 0px 0px #18ba60, 6px 6px 0px 0px #18ba60 !important;
box-shadow: -6px -6px 0px 0px #18ba60, -6px 6px 0px 0px #18ba60, 6px -6px 0px 0px #18ba60, 6px 6px 0px 0px #18ba60 !important;
-webkit-box-shadow: -6px -6px 0px 0px #18ba60, -6px 6px 0px 0px #18ba60, 6px -6px 0px 0px #18ba60, 6px 6px 0px 0px #18ba60 !important;
-moz-box-shadow: -6px -6px 0px 0px #18ba60, -6px 6px 0px 0px #18ba60, 6px -6px 0px 0px #18ba60, 6px 6px 0px 0px #18ba60 !important;
box-shadow: -6px -6px 0px 0px #18ba60, -6px 6px 0px 0px #18ba60, 6px -6px 0px 0px #18ba60, 6px 6px 0px 0px #18ba60 !important;
}
.fn-text {
font-size: 30px !important;
line-height: 36px !important;
font-weight: 300 !important;
color: #ffffff !important;
color: #ffffff !important;
text-align: left !important;
background-color: rgba(0, 0, 0, 0.7) !important;
margin: 0 20px !important;
}
.fn-text .fn-inner-container {
padding: 8px !important;
}
.fn-form {
margin-top: 15px !important;
}
.fn-input {} .fn-input input {
width: 100% !important;
padding: 5px !important;
height: 32px !important;
font-family: 'arial', serif !important;
color: #bebebe !important;
background-color: #ffffff !important;
border: 1px #ffffff solid !important;
border-radius: 1px !important;
font-size: 18px !important;
line-height: 32px !important;
font-weight: 400 !important;
margin-bottom: 18px !important;
}
.fn-submit {
text-align: right !important;
}
.fn-submit input[type="submit"] {
height: 40px !important;
padding: 0 20px !important;
font-family: 'arial', serif !important;
background-color: #18ba60 !important;
background-color: #18ba60 !important;
border: 0 !important;
color: #ffffff !important;
color: #ffffff !important;
cursor: pointer !important;
text-align: center !important;
font-size: 24px !important;
line-height: 40px !important;
font-weight: 400 !important;
margin-top: 10px !important;
margin-bottom: 10px !important;
}
@media only screen and (max-width: 400px) {
.fn-reset .fn-container {
width: 95% !important;
margin: 0 auto !important;
}
.fn-reset .fn-h1 {
font-size: 22px !important;
line-height: 36px !important;
}
.fn-reset .fn-text {
font-size: 20px !important;
line-height: 28px !important;
font-weight: 400 !important;
}
.fn-reset .fn-form {
margin-top: 5px !important;
}
.fn-reset .fn-input input {
font-size: 14px !important;
margin-bottom: 10px !important;
}
.fn-reset .fn-submit {
margin-top: 0px !important;
}
.fn-reset .fn-submit input[type="submit"] {
font-size: 18px !important;
font-weight: 700 !important;
margin-top: 0px !important;
}
}
Example of JavaScript:
//Put your JS code here if needed
console.log ("There's a Nugget on this page!");
Use the following HTML markups to enrich your Nugget functionality:
- To "pop" the HTML in the center of the screen and make sure it's always centered, even if you scroll or change frame, insert: data-popup="true"
- To add our standard modal background below the popup, insert: data-modal="true"
Example:<div class="fn-container" data-popup="true" data-modal="true">....</div> -
To capture data using input field, insert: data-key="email" (values can be name/email/phone/company)
Example: <input type="email" placeholder="Your email" data-key="email" data-required="true">
**Email validation will automatically occur if data key is labeled correctly** - Submit button should have data-trigger="conversion".
Example: <input type="submit" placeholder="Submit" data-trigger="conversion"> - To redirect site visitor to a thank you page, add: data-redirect to the submit button.
Example: <input type="submit" value="Submit" data-trigger="conversion" data-redirect="http://mysite.com/thank-you.html"> - Dismiss button should have data-trigger="dismiss"
Example: <input type="submit" value="Close" data-trigger="dismiss">
Note that the system is designed so the JS code is fired as soon as possible (asynchronously) to make sure that our nuggets capture as much traffic as possible. The HTML/CSS on the other hand appear after the set delay you've set, upon exit, or using our algorithmic timing (according to your selection) in the campaign creation process.
If you have requests or ideas for additional HTML markups, contact us - we'll make it happen.