<header class="demoTopArea"> <div class="container"> <h1 class="boldest pad40 padfix3">Ad Builder</h1> </div> </header> <div id="anchor" class="tooWideHide"> <div class="row"> <div class="container" style="padding: 15px"> <ul class="nav nav-pills nav-wizard"> {{#rows}} <li class="{{class}} Circle{{id}} " style="padding: 0; text-align: center; {{navStyle}} "> {{^first}} <div class="nav-wedge"></div> {{/first}} <a href="javascript:;">{{name}}</a> {{^last}} <div class="nav-arrow"></div> {{/last}} </li> {{/rows}} </ul> </div> </div> </div> {{#rows.length}} <p>Pick the page that best represents your ad / offer.</p> {{/rows.length}} {{#rows}} <div class="pageList" data-index="{{get_index}}"> <img style="margin-left:10px;" src="{{picture.data.url}}" width="40px" height="40px" /> <span style="margin:0 10px;">{{name}}</span> {{#show_likes}} <span style="color:{{get_color}}"> <i style="margin-right: 4px;" class="fa fa-thumbs-o-up"></i> {{likes}} </span> {{/show_likes}} </div> {{/rows}} {{^rows}} <div class="txtBrandPrimary" style="font-weight: bolder; font-size: 24px;"> Oops! It looks like you do not have your own Facebook <span style="text-decoration: underline;font-weight: 900;">Business</span> Page. </div> <div style="text-align:center; margin:10px 0 20px 0;"> <a class="btn btn-primary txtStrong" style="font-size:18px;padding: 10px 20px;" href="https://www.facebook.com/pages/create" target="_blank"> Click Here to Create your Facebook <span style="text-decoration: underline;font-weight: 900;">Business</span> Page </a> <div> Create the hub for your business on Facebook <span class="helpHover" title="Your Facebook Page is an extension of your business. It’s an easy way to share updates and more with the people who matter most. You need it to engage your customers to send your ads."> <i class="fa fa-fw">&#xf05a;</i> </span> </div> </div> <div style="font-size: 18px;"> <div style="font-weight: 700;">Common issues on why you are seeing this message:</div> <ul class="dashed"> <li>You do not have access to a Facebook “Business” page. <br />It is FREE to make. Just <a href="https://www.facebook.com/pages/create?url=https://Fwww.facebook.com/pages/" target="_blank">click here</a>.</li> <li>You logged in as another Facebook User, who does not have a page.</li> <li>You do not have administrator access to your Facebook page.</li> <li>You did not publish your Facebook Business Page.</li> </ul> </div> <div class="txtBrandPrimary" style="font-weight: bolder; font-size: 24px; text-align:center; margin: 10px 0;"> Did you make your Facebook <span style="text-decoration: underline;font-weight: 900;">Business</span> Page? </div> <div style="text-align:center;"> <a href="javascript:;" onclick="Api.login({{#show_likes}}true{{/show_likes}}{{^show_likes}}false{{/show_likes}},true)" class="btn btn-primary txtStrong" style="font-size:18px;padding: 10px 20px;"> Yes! I just made my Facebook <span style="text-decoration: underline;font-weight: 900;">Business</span> Page </a> {{#refresh_error}} <div style="color: #cc0000;"> We are still not seeing your page. Did you <a href="https://www.facebook.com/pages/create?url=https://Fwww.facebook.com/pages/" target="_blank">create one</a>? </div> {{/refresh_error}} </div> {{/rows}} <div class="adPreview_pageIcon clearfix"> {{#icon}} <img src="{{icon}}" width="40px" height="40px" /> {{/icon}} {{^icon}} <img src="/User_Content/Partners/1/fb_pageIcon.gif" width="40px" height="40px" /> {{/icon}} </div> <div class="adPreview_topBox"> <div> <span class="adPreview_topTxtBold">{{name}} </span> {{#posted}}<span id="adPreview_posted"><span>posted an </span><span class="adPreview_topTxtBold">Offer</span></span>{{/posted}} </div> <div class="adPreview_nudgePinfo"><span style="adPreview_postDate">{{postDate}}</span><span class="adPreview_nudgeglobe"><img src="/Application/_includes/media/fb_world.gif" width="13px" height="13px" /></span></div> </div> <div class="adPreview_description adPreview_dotdotdot2">{{description}}</div> <div class="adPreview_image"><img id="adPreview_image" src="/Application/_includes/media/ImagePull_null.gif" width="320px" height="166px" /></div> <div class="adPreview_offerArea"> <button class="adPreview_btn" style="margin-top: 8px;">{{btn}}</button> <div class="adPreview_headline adPreview_dotdotdot">{{headline}}</div> <div class="adPreview_exp">{{exp}}</div> <div class="adPreview_website">{{website}}</div> </div> <div class="adPreview_pageIcon clearfix"> {{#icon}} <img src="{{icon}}" width="40px" height="40px" /> {{/icon}} {{^icon}} <img src="/User_Content/Partners/1/fb_pageIcon.gif" width="40px" height="40px" /> {{/icon}} </div> <div class="adPreview_topBox"> <div> <span class="adPreview_topTxtBold">{{name}} </span> {{#posted}}<span id="adPreview_posted"><span>posted an </span><span class="adPreview_topTxtBold">Offer</span></span>{{/posted}} </div> <div class="adPreview_nudgePinfo"> <span style="adPreview_postDate">{{postDate}}</span><span class="adPreview_nudgeglobe"><img src="/Application/_includes/media/fb_world.gif" width="13px" height="13px" /></span></div> </div> <div class="adPreview_description">{{description}}</div> <div class="adPreview_imageNF"><img id="adPreview_image" src="/Application/_includes/media/ImagePull_null.gif" width="418px" height="217px" /></div> <div class="adPreview_offerAreaNF " style="{{#is_offer}}height: 80px;{{/is_offer}}"> <button class="adPreview_btn" style="{{style_btn_desc}}">{{btn}}</button> <div class="adPreview_headline">{{headline}}</div> <div class="adPreview_exp">{{exp}}</div> {{#is_offer}} <div class="adPreview_offer_text">BE THE FIRST TO GET THIS OFFER</div> {{/is_offer}} <div class="adPreview_caption">{{caption}}</div> </div> <div class="adPreview_imageRC"><img id="adPreview_image" src="/Application/_includes/media/ImagePull_null.gif" width="228px" height="119px" /></div> <span class="adPreview_topTxtBold adPreviewRCPage">{{name}}</span> <div class="adPreview_headlineRC adPreview_headline">{{headline}}</div> <div class="adPreview_descriptionRC adPreview_description">{{description}}</div> <div class="adPreview_captionRC adPreview_caption">{{caption}}</div> <button class="adPreview_btnRC">{{btn}}</button><div class="adPreview_expRC adPreview_exp">{{exp}}</div> <div class="row formRowPad"> <div class="col-sm-12 fromLabelLayout"> <i id="error_icon_title_1" class="fa fa-fw fromErrorX hideForErrorAndSteps">&#xf00d;</i> <label for="title_1"> Ad Text: (Describe your offer) <a href="javascript:;" class="helpHover" tabindex="-1" title="Describe your offer. 90 characters or less is recommended."> <i class="fa fa-fw">&#xf05a;</i> </a> </label> <div class="input-group date"> <textarea id="title_1" type="text" class="form-control" data-index="1" onkeyup="textAreaAdjust(this,44,2)" placeholder="Describe your business in 90 characters or less" style="height:44px;max-width:352px;"></textarea> <span class="input-group-addon autopaste helpHover" data-index="1" title="Need ideas for your ad? Click here for examples"> <i class="fa fa-fw fa-lightbulb-o" style="font-size: 20px;"></i> </span> </div> <div class="formErrorColorSupport"> <div id="error_title_max_1" class="stepError hideForErrorAndSteps"></div> </div> </div> </div> <div class="row formRowPad formOptional" id="title_2Optional"> <div class="col-sm-12 fromLabelLayout"> <i id="error_icon_title_2" class="fa fa-fw fromErrorX hideForErrorAndSteps">&#xf00d;</i> <label for="title_2"> Optional Ad Text: (to test multiple offers) <a href="javascript:;" class="helpHover" tabindex="-1" title="Place another title of your offer to make a 2nd ad. Our system will test both ads to figure out the best one."> <i class="fa fa-fw">&#xf05a;</i> </a> </label> <div class="input-group date"> <textarea id="title_2" type="text" class="form-control" data-index="2" onkeyup="textAreaAdjust(this,44,2)" placeholder="Describe your business in 90 characters or less"></textarea> <span class="input-group-addon autopaste helpHover" data-index="1" title="Need ideas for your ad? Click here for examples"> <i class="fa fa-fw fa-lightbulb-o" style="font-size: 20px;"></i> </span> </div> <div class="formErrorColorSupport"> <div id="error_title_max_2" class="stepError hideForErrorAndSteps"></div> </div> </div> </div> {{#enabled_library}} <div class="row formRowPadImage"> <div class="col-sm-12"> <i id="error_icon_dropzone" class="fa fa-fw fromErrorX hideForErrorAndSteps">&#xf00d;</i> <label for="file">Image: (select up to three) <a href="javascript:;" class="helpHover" tabindex="-1" title="Select up to 3 images, and our system will figure out the best image combined with your copy for your offer."><i class="fa fa-fw">&#xf05a;</i></a> </label> </div> <div class="col-sm-12"> <div class="formImageArea txtAlignC"> <div id="dropzone" class="row formImageThumbArea dropzone" style="cursor: pointer;"> <div class="formImageThumbBase"> <i class="fa fa-fw formImageUploadIcon ">&#xf030;</i> <div class="formImageUploadTxt">Click here to select your images.</div> </div> </div> </div> <div class="formErrorColorSupport"> <div id="error_image" class="stepError hideForErrorAndSteps">Please upload at least one image</div> </div> </div> </div> {{/enabled_library}} {{^enabled_library}} <div class="row formRowPadImage"> <div class="col-sm-12"> <i id="error_icon_dropzone" class="fa fa-fw fromErrorX hideForErrorAndSteps">&#xf00d;</i> <label for="file">Image: (upload up to 3 images to test offers) <a href="javascript:;" class="helpHover" tabindex="-1" title="Upload images in 1200x628. If the size does not match, we will automatically crop it for you. You can load up to 3 images, and our system will figure out the best image combined with your copy for your offer."><i class="fa fa-fw">&#xf05a;</i></a></label> </div> <div class="col-sm-12"> <div class="formImageArea txtAlignC"> <div id="dropzone" class="row formImageThumbArea dropzone"></div> </div> <div class="formImageText"> Your image may not include more than 20% text. <br /> <i class="fa fa-picture-o"></i> Need Images? <a class="fancybox fancybox.iframe" href="/Themes/Blue/html/StockSites.html" style="text-decoration: underline;">click here</a> </div> <div class="formErrorColorSupport"> <div id="error_image" class="stepError hideForErrorAndSteps">Please upload at least one image</div> </div> </div> </div> {{/enabled_library}} <div class="row formRowPad shim10"> <div class="col-sm-3"> <label for="offer_type"> Offer Type </label> </div> <div class="col-sm-4" style="padding: 0;"> <select id="select_offer_type" class="form-control" style="height: 28px; padding: 0 6px; width: auto;" onchange="Preview.changeOfferType(this.value);"> <option value="percentage_off">Percent Off</option> <option value="cash_discount">Amount Off</option> <option value="bogo">Buy One, Get One</option> <option value="free_stuff">Free Stuff</option> </select> </div> <div id="offer_currency_div" class="col-sm-5" style="display: none;"> <select id="offer_currency" class="form-control" style="height: 28px; padding: 0 6px; width: 100%;"> <option value="SGD">SGD - Singapore dollar</option> <option value="RON">RON - Romanian new leu</option> <option value="EUR">EUR - Euro</option> <option value="TRY">TRY - Turkish lira</option> <option value="SEK">SEK - Swedish krona</option> <option value="ZAR">ZAR - South African rand</option> <option value="HKD">HKD - Hong Kong dollar</option> <option value="CHF">CHF - Swiss franc</option> <option value="NIO">NIO - Nicaraguan córdoba</option> <option value="JPY">JPY - Japanese yen</option> <option value="ISK">ISK - Icelandic króna</option> <option value="TWD">TWD - New Taiwan dollar</option> <option value="NZD">NZD - New Zealand dollar</option> <option value="CZK">CZK - Czech koruna</option> <option value="AUD">AUD - Australian dollar</option> <option value="THB">THB - Thai baht</option> <option value="BOB">BOB - Boliviano</option> <option value="BRL">BRL - Brazilian real</option> <option value="MXN">MXN - Mexican peso</option> <option value="USD" selected="selected">USD - United States dollar</option> <option value="ILS">ILS - Israeli new shekel</option> <option value="HNL">HNL - Honduran lempira</option> <option value="MOP">MOP - Macanese pataca</option> <option value="COP">COP - Colombian peso</option> <option value="UYU">UYU - Uruguayan peso</option> <option value="CRC">CRC - Costa Rican colon</option> <option value="DKK">DKK - Danish krone</option> <option value="QAR">QAR - Qatari riyal</option> <option value="PYG">PYG - Paraguayan guaraní</option> <option value="CAD">CAD - Canadian dollar</option> <option value="INR">INR - Indian rupee</option> <option value="KRW">KRW - South Korean won</option> <option value="GTQ">GTQ - Guatemalan quetzal</option> <option value="AED">AED - United Arab Emirates dirham</option> <option value="VEF">VEF - Venezuelan bolívar fuerte</option> <option value="SAR">SAR - Saudi riyal</option> <option value="NOK">NOK - Norwegian krone</option> <option value="CNY">CNY - Chinese yuan</option> <option value="ARS">ARS - Argentine peso</option> <option value="PLN">PLN - Polish złoty</option> <option value="GBP">GBP - Pound sterling</option> <option value="PEN">PEN - Peruvian nuevo sol</option> <option value="PHP">PHP - Philippine peso</option> <option value="VND">VND - Vietnamese dong</option> <option value="RUB">RUB - Russian rouble</option> <option value="HUF">HUF - Hungarian forint</option> <option value="MYR">MYR - Malaysian ringgit</option> <option value="CLP">CLP - Chilean peso</option> <option value="IDR">IDR - Indonesian rupiah</option> </select> </div> </div> <div class="row formRowPad mt10"> <div id="offer_type"> {{> offer_type}} </div> <div class="col-sm-12 mt10"> <label for="redemption_link"> Offer Title <a href="javascript:;" class="helpHover" tabindex="-1" title="Write an eye grabbing text describing your offer. 25 characters or less is recommended. (Example: Sale! 25% off Dinner for Two!)"> <i class="fa fa-fw">&#xf05a;</i> </a> </label> </div> <div class="col-sm-12"> <input id="offer_title" data-index="1" type="text" class="form-control" placeholder="20% off" /> <div id="error_offer_title_1" class="stepError hideForErrorAndSteps"></div> </div> <div class="col-sm-12 mt10"> <label for="redemption_link"> Details <a href="javascript:;" class="helpHover" tabindex="-1" title="Tell people about your offer."> <i class="fa fa-fw">&#xf05a;</i> </a> </label> </div> <div class="col-sm-12"> <input id="offer_details" type="text" class="form-control" placeholder="Tell people about this offer" /> <div id="error_offer_details" class="stepError hideForErrorAndSteps"></div> </div> </div> <div class="row formRowPad mt15"> <div class="col-sm-12"> <div class="btn-group" data-toggle="buttons"> <label id="online" class="btn btn-primary" style="border: 1px solid #ccc;"> <input type="radio" name="offer_availability_options" value="online" autocomplete="off" checked="checked" /> Online </label> <label id="in_store" class="btn " style="border: 1px solid #ccc;"> <input type="radio" name="offer_availability_options" value="in_store" autocomplete="off" /> In store </label> </div> </div> <div id="offer_availability" class="mt10"> {{> offer_availability}} </div> </div> <div class="row formRowPad formOptional hideForErrorAndSteps " id="redemption_codeOptional"> <div class="col-sm-12"> <i id="error_icon_redemption_code" class="fa fa-fw fromErrorX hideForErrorAndSteps">&#xf00d;</i> <label for="redemption_code"> Online Promo Code: <a href="javascript:;" class="helpHover" tabindex="-1" title="Please input an Online Promo Code if there is one to go with your offer campaign."> <i class="fa fa-fw">&#xf05a;</i> </a> </label> </div> <div class="col-sm-12"> <input id="redemption_code" type="text" class="form-control" /> </div> </div> <div class="row formRowPad mt15"> <div class="col-sm-12 fromLabelLayout"> <i id="error_icon_expiration_time" class="fa fa-fw fromErrorX hideForErrorAndSteps">&#xf00d;</i> <label for="expiration_time"> When do you want your offer to expire? <a href="javascript:;" class="helpHover" tabindex="-1" title="Pick a date on when your offer will expire. An offer must expire at least 8 days from today. We recommend setting it between 2 - 4 weeks from today."> <i class="fa fa-fw">&#xf05a;</i> </a> </label> <div class="input-group date" id="datetimepicker1"> <input id="expiration_time" type="text" class="form-control" placeholder="01/07/2019" value="01/07/2019" readonly="true" /> <span class="input-group-addon"><i class="fa fa-fw" style="font-size: 20px;">&#xf073;</i></span> </div> <div class="formErrorColorSupport"> <div id="error_expiration_time" class="stepError hideForErrorAndSteps">Please select a date range at least longer then 14 days from today.</div> </div> </div> </div> <div class="row formRowPad formOptional" id="termsOptional"> <div class="col-sm-12"> <i id="error_icon_terms" class="fa fa-fw fromErrorX hideForErrorAndSteps">&#xf00d;</i> <label for="terms"> Terms &amp; Conditions: <a href="javascript:;" class="helpHover" tabindex="-1" title="If your offer has any Terms, place it here (Example: 1 per customer)"><i class="fa fa-fw">&#xf05a;</i></a> </label> </div> <div class="col-sm-12"> <textarea id="terms" class="form-control" rows="3"></textarea> <div class="formErrorColorSupport"><div class="stepError hideForErrorAndSteps"></div></div> </div> </div> <div class="row formRowPad "> <div class="col-sm-12 col-lg-5 fromLabelLayout"> <i id="error_icon_claim_limit" class="fa fa-fw fromErrorX hideForErrorAndSteps">&#xf00d;</i> <label for="claim_limit"> Claim Limit: <a href="javascript:;" class="helpHover" tabindex="-1" title="You can limit how many people can get your offer in their email."><i class="fa fa-fw">&#xf05a;</i></a> </label> </div> <div class="col-sm-12 col-lg-3 fromLabelLayout"> <input id="radio_b1" type="radio" name="radioClaim" value="0" checked="checked" /> None </div> <div class="col-sm-12 col-lg-4 fromLabelLayout formOptional" id="claim_limitOptional"> <label class="radio-inline FRightS"> <input id="radio_b2" type="radio" name="radioClaim" value="1" /> <input id="claim_limit" type="text" class="form-control formLimit clearfix" placeholder="5000" /> </label> </div> </div> <div class="col-sm-12"> <label for="offer_percent"> Percent Value <a href="javascript:;" class="helpHover" tabindex="-1" title="People will get this percentage taken off their total purchase."> <i class="fa fa-fw">&#xf05a;</i> </a> </label> </div> <div class="col-sm-12"> <input id="offer_percent" type="text" class="form-control" placeholder="20%" onkeypress="input_filter(event);" /> <div id="error_offer_percent" class="stepError hideForErrorAndSteps"></div> </div> <div class="col-sm-12"> <label for="offer_discount"> Discount Value <a href="javascript:;" class="helpHover" tabindex="-1" title="People will get this percentage taken off their total purchase."> <i class="fa fa-fw">&#xf05a;</i> </a> </label> </div> <div class="col-sm-12"> <input id="offer_discount" type="text" class="form-control" placeholder="20" onkeypress="input_filter(event);" /> <div id="error_offer_discount" class="stepError hideForErrorAndSteps"></div> </div> <div class="col-sm-6"> <label for="offer_buy"> Buy <a href="javascript:;" class="helpHover" tabindex="-1" title="Choose how many items people need to buy. Then tell them what item they need to purchase in the offer title."> <i class="fa fa-fw">&#xf05a;</i> </a> </label> </div> <div class="col-sm-6"> <label for="offer_get"> Get <a href="javascript:;" class="helpHover" tabindex="-1" title="Choose how many items people will get if they redeem this offer. Then tell them what item they'll receive in the offer title."> <i class="fa fa-fw">&#xf05a;</i> </a> </label> </div> <div class="col-sm-6"> <input id="offer_buy" type="text" class="form-control" placeholder="1" onkeypress="input_filter(event);" /> <div id="error_offer_buy" class="stepError hideForErrorAndSteps"></div> </div> <div class="col-sm-6"> <input id="offer_get" type="text" class="form-control" placeholder="1" onkeypress="input_filter(event);" /> <div id="error_offer_get" class="stepError hideForErrorAndSteps"></div> </div> <div class="col-sm-12 mt10"> <label for="redemption_link"> Your website: <a href="javascript:;" class="helpHover" tabindex="-1" title="Add the website URL where people can redeem this offer."> <i class="fa fa-fw">&#xf05a;</i> </a> </label> </div> <div class="col-sm-12"> <input id="offer_website" type="text" class="form-control" /> <div class="formErrorColorSupport"><div id="offer_website_error_link" class="stepError hideForErrorAndSteps">Not a valid URL.</div></div> </div> {{> discount_code}} <div class="col-sm-12 mt10 formOptional" id="offer_codeOptional"> <label for="offer_code"> Discount Code (optional): <a href="javascript:;" class="helpHover" tabindex="-1" title="Create a code for people to use at checkout. Add one code for all people or upload unique codes."> <i class="fa fa-fw">&#xf05a;</i> </a> </label> <div id="offer_code_div"> <input type="text" id="offer_code" class="form-control" placeholder="20OFFNow" /> </div> <div id="upload_offer_code_div" class="row formRowPad" style="display: none;"> <div id="filename_offer_code_div" style="display: block; width: auto; float: left; margin-right: 10px;"> </div> <a href="javascript:;" onclick="Preview.remove_uploaded_file();"><i class="fa fa-times" aria-hidden="true"></i></a> </div> or <a id="upload_discount_codes" href="javascript:;">upload a unique discount codes</a> with a csv file. <input id="discount_codes_csv_file" type="file" accept=".csv" style="display: none;" /> <div class="formErrorColorSupport"><div id="upload_discount_codes_error" class="stepError hideForErrorAndSteps"></div></div> </div> <div class="col-sm-12 mt10"> <label for="offer_code"> Discount Code: <a href="javascript:;" class="helpHover" tabindex="-1" title="Create a code for people to use at checkout. Add one code for all people or upload unique codes."> <i class="fa fa-fw">&#xf05a;</i> </a> </label> <div id="offer_code_div"> <input type="text" id="offer_code" class="form-control" placeholder="20OFFNow" /> <div class="formErrorColorSupport"><div id="error_offer_code" class="stepError hideForErrorAndSteps"></div></div> </div> <div id="upload_offer_code_div" class="row formRowPad" style="display: none;"> <div id="filename_offer_code_div" style="display: block; width: auto; float: left; margin-right: 10px;"> </div> <a href="javascript:;" onclick="Preview.remove_uploaded_file();"><i class="fa fa-times" aria-hidden="true"></i></a> </div> or <a id="upload_discount_codes" href="javascript:;">upload a unique discount codes</a> with a csv file. <input id="discount_codes_csv_file" type="file" accept=".csv" style="display: none;" /> <div class="formErrorColorSupport"><div id="upload_discount_codes_error" class="stepError hideForErrorAndSteps"></div></div> </div> <div class="col-sm-12 mt10"> <label> Promo Code: <a href="javascript:;" class="helpHover" tabindex="-1" title="Choose your discount code types."> <i class="fa fa-fw">&#xf05a;</i> </a> </label> </div> <div class="col-sm-12"> <select id="discount_type" class="form-control" style="height: 28px; padding: 0 6px; width: auto;" onchange="Preview.change_barcode_type(this.value)"> <option value="discount_code">Discount Code</option> <option value="no_code">No Code</option> <option value="barcode">Barcode</option> </select> </div> <div id="discount_type_div"> {{> discountcode}} </div> <div class="col-sm-12 mt10"> <label> Barcode: <a href="javascript:;" class="helpHover" tabindex="-1" title="Create a barcode people can use at checkout."> <i class="fa fa-fw">&#xf05a;</i> </a> </label> </div> <div class="col-sm-12"> <select class="form-control" style="height: 28px; padding: 0 6px; width: auto; display:inline-block;" id="barcode_type"> <option value="CODE128">CODE128</option> <option value="CODE128B">CODE128B</option> <option value="EAN">EAN</option> <option value="PDF417">PDF417</option> <option value="QR">QR</option> <option value="UPC_A">UPC_A</option> <option value="UPC_E">UPC_E</option> <option value="DATAMATRIX">DATAMATRIX</option> <option value="CODE93">CODE93</option> </select> <span id="barcode-length" style="margin-left: 10px;color: #999;"></span> </div> <div class="col-sm-12 mt10"> <input type="text" id="barcode" class="form-control" placeholder="1234567890" /> <div class="formErrorColorSupport"> <div id="error_barcode" class="stepError"></div> </div> Preview the bar code by filling out the form above. </div> <div class="col-sm-12"> <canvas style="margin-top:15px; display:none;" id="barcode-preview"></canvas> </div> <div class="row formRowPad"> <div class="col-sm-12 fromLabelLayout"> <i id="error_icon_title_1" class="fa fa-fw fromErrorX hideForErrorAndSteps">&#xf00d;</i> <label for="title_1"> Ad Text: (Why should they visit your business?)<a href="javascript:;" class="helpHover" tabindex="-1" title="Write an eye grabbing ad copy of your business. 90 characters or less is recommended. (Example: Vist our store for huge savings!)"><i class="fa fa-fw">&#xf05a;</i></a> </label> <div class="input-group date"> <textarea id="title_1" type="text" class="form-control" onkeyup="textAreaAdjust(this,44,2)" placeholder="Your offer description" data-index="1" style="height:44px;max-width:352px;"></textarea> <span class="input-group-addon autopaste helpHover" data-index="4" title="Need ideas for your ad? Click here for examples"> <i class="fa fa-fw fa-lightbulb-o" style="font-size: 20px;"></i> </span> </div> <div class="formErrorColorSupport"> <div id="error_title_max_1" class="stepError hideForErrorAndSteps"></div> </div> </div> </div> <div class="row formRowPad formOptional" id="title_2Optional"> <div class="col-sm-12 fromLabelLayout"> <i id="error_icon_title_2" class="fa fa-fw fromErrorX hideForErrorAndSteps">&#xf00d;</i> <label for="title_2"> Optional Ad Text: (to test multiple offers)<a href="javascript:;" class="helpHover" tabindex="-1" title="Place another ad text to test multiple ads. Our system will test both ads to figure out the best one."><i class="fa fa-fw">&#xf05a;</i></a> </label> <div class="input-group date"> <textarea id="title_2" onkeyup="textAreaAdjust(this,44,2)" type="text" class="form-control" data-index="2"></textarea> <span class="input-group-addon autopaste helpHover" data-index="4" title="Need ideas for your ad? Click here for examples"> <i class="fa fa-fw fa-lightbulb-o" style="font-size: 20px;"></i> </span> </div> <div class="formErrorColorSupport"> <div id="error_title_max_2" class="stepError hideForErrorAndSteps"></div> </div> </div> </div> {{#enabled_library}} <div class="row formRowPadImage"> <div class="col-sm-12"> <i id="error_icon_dropzone" class="fa fa-fw fromErrorX hideForErrorAndSteps">&#xf00d;</i> <label for="file">Image: (select up to three) <a href="javascript:;" class="helpHover" tabindex="-1" title="Select up to 3 images, and our system will figure out the best image combined with your copy for your offer."><i class="fa fa-fw">&#xf05a;</i></a></label> </div> <div class="col-sm-12"> <div class="formImageArea txtAlignC"> <div id="dropzone" class="row formImageThumbArea dropzone" style="cursor: pointer;"> <div class="formImageThumbBase"> <i class="fa fa-fw formImageUploadIcon ">&#xf030;</i> <div class="formImageUploadTxt">Click here to select your images.</div> </div> </div> </div> <div class="formErrorColorSupport"> <div id="error_image" class="stepError hideForErrorAndSteps">Please upload at least one image</div> </div> </div> </div> {{/enabled_library}} {{^enabled_library}} <div class="row formRowPadImage"> <div class="col-sm-12"> <i id="error_icon_dropzone" class="fa fa-fw fromErrorX hideForErrorAndSteps">&#xf00d;</i> <label for="file">Image: (upload up to 3 images to test offers) <a href="javascript:;" class="helpHover" tabindex="-1" title="Upload images in 1200x628. If the size does not match, we will automatically crop it for you. You can load up to 3 images, and our system will figure out the best image combined with your copy for your offer."><i class="fa fa-fw">&#xf05a;</i></a></label> </div> <div class="col-sm-12"> <div class="formImageArea txtAlignC"> <div id="dropzone" class="row formImageThumbArea dropzone"></div> </div> <div class="formImageText"> Your image may not include more than 20% text. <br /> <i class="fa fa-picture-o"></i> Need Images? <a class="fancybox fancybox.iframe" href="/Themes/Blue/html/StockSites.html" style="text-decoration: underline;">click here</a> </div> <div class="formErrorColorSupport"> <div id="error_image" class="stepError hideForErrorAndSteps">Please upload at least one image</div> </div> </div> </div> {{/enabled_library}} <div class="row formRowPad"> <div class="col-sm-12"> <label> Call to Action: <a href="javascript:;" class="helpHover" tabindex="-1" title="Please choose the action you want your customers to make"><i class="fa fa-fw">&#xf05a;</i></a> </label> </div> <div class="col-sm-12"> <select runat="server" class="btn btn-default dropdown-toggle" name="call_to_action" onchange="Preview.changeDropdownDescription(this.value);" id="call_to_action5c0f07ef04cba"><option selected="selected" value="MESSAGE_PAGE">Send Message</option><option value="GET_DIRECTIONS">Get Directions</option><option value="CALL_NOW">Call Now</option><option value="LEARN_MORE">Learn More</option></select> <div id="call_to_description">Have customers send you a message in Facebook, when they are near your business.</div> <div class="shim10" id="div_business_phone" style="display: none;"> <i id="error_icon_business_phone" class="fa fa-fw fromErrorX hideForErrorAndSteps">&#xf00d;</i> <label for="business_phone">Business phone number:<a class="helpHover" tabindex="-1" title="Add your business phone number. Premium-rate phone numbers are not allowed (1-900 phone numbers.) " href="javascript:;"><i class="fa fa-fw"></i></a></label> <input id="business_phone" type="text" class="form-control" onkeypress="input_filter(event);" onkeyup="changeString(event, this.id)" /> <div class="formErrorColorSupport"><div id="error_business_phone" class="stepError"></div></div> </div> <div class="shim10" id="div_website_link" style="display: none;"> <i id="error_icon_website_link" class="fa fa-fw fromErrorX hideForErrorAndSteps">&#xf00d;</i> <label for="website_link">Your website address to send people to:<a href="javascript:;" class="helpHover" tabindex="-1" title="Add a link to where you want to send your customers to, like store hours, coupons and offers"><i class="fa fa-fw">&#xf05a;</i></a></label> <input id="website_link" type="text" class="form-control" /> <div class="formErrorColorSupport"><div id="error_website_link" class="stepError"></div></div> </div> </div> </div> <div class="row formRowPad formOptional" id="headlineOptional"> <div class="col-sm-12 fromLabelLayout"> <label id="label_headline" for="title_1"> Headline: (Optional) <a href="javascript:;" class="helpHover" tabindex="-1" title="Write a short description of your offer."><i class="fa fa-fw">&#xf05a;</i></a> </label> <div class="input-group date"> <input id="headline" type="text" class="form-control" /> <span class="input-group-addon autopaste helpHover" data-index="3" title="Need ideas for your ad? Click here for examples"> <i class="fa fa-fw fa-lightbulb-o" style="font-size: 20px;"></i> </span> </div> <div class="formErrorColorSupport"> <div id="error_headline" class="stepError hideForErrorAndSteps"></div> </div> </div> </div> <div class="row formRowPad formOptional shim10" id="descriptionOptional"> <div class="col-sm-12"> <i id="error_icon_description" class="fa fa-fw fromErrorX hideForErrorAndSteps">&#xf00d;</i> <label for="description"> Business Description (Optional, up to 200 characters): <a href="javascript:;" class="helpHover" tabindex="-1" title="Optional text to tell the customer why they should visit your business"><i class="fa fa-fw">&#xf05a;</i></a></label> </div> <div class="col-sm-12"> <textarea id="description" class="form-control" rows="3" maxlength="200"></textarea> </div> </div> <div class="row formRowPad"> <div class="col-sm-12 fromLabelLayout"> <i id="error_icon_title_1" class="fa fa-fw fromErrorX hideForErrorAndSteps">&#xf00d;</i> <label id="label_title_1" for="title_1"> Ad Text: (Why should they fill out your form?)<a href="javascript:;" class="helpHover" tabindex="-1" title="Write a description of your offer, to entice people to fill out your form. Recommended text length is 90."><i class="fa fa-fw">&#xf05a;</i></a> </label> <div class="input-group date"> <textarea id="title_1" type="text" class="form-control" data-index="1" onkeyup="textAreaAdjust(this,44,2)" style="height:44px;max-width:352px;"></textarea> <span class="input-group-addon autopaste helpHover" data-index="6" title="Need ideas for your ad? Click here for examples"> <i class="fa fa-fw fa-lightbulb-o" style="font-size: 20px;"></i> </span> </div> <div class="formErrorColorSupport"> <div id="error_title_max_1" class="stepError hideForErrorAndSteps"></div> </div> </div> </div> <div class="row formRowPad formOptional" id="title_2Optional"> <div class="col-sm-12 fromLabelLayout"> <i id="error_icon_title_2" class="fa fa-fw fromErrorX hideForErrorAndSteps">&#xf00d;</i> <label id="label_title_2" for="title_2"> Optional Ad Text: (to test multiple offers)<a href="javascript:;" class="helpHover" tabindex="-1" title="Write an optional text for your offer to test multiple ads at once to see what message works best."><i class="fa fa-fw">&#xf05a;</i></a> </label> <div class="input-group date"> <textarea id="title_2" type="text" class="form-control" data-index="2" onkeyup="textAreaAdjust(this,44,2)" style="height:44px;max-width:352px;"></textarea> <span class="input-group-addon autopaste helpHover" data-index="6" title="Need ideas for your ad? Click here for examples"> <i class="fa fa-fw fa-lightbulb-o" style="font-size: 20px;"></i> </span> </div> <div class="formErrorColorSupport"> <div id="error_title_max_2" class="stepError hideForErrorAndSteps"></div> </div> </div> </div> <div class="row formRowPad"> <div class="col-sm-12 fromLabelLayout"> <label id="label_headline" for="title_1"> Headline: (A simple message) <a href="javascript:;" class="helpHover" tabindex="-1" title="Write a short description of your offer."><i class="fa fa-fw">&#xf05a;</i></a> </label> <div class="input-group date"> <input id="headline" type="text" class="form-control" /> <span class="input-group-addon autopaste helpHover" data-index="5" title="Need ideas for your ad? Click here for examples"> <i class="fa fa-fw fa-lightbulb-o" style="font-size: 20px;"></i> </span> </div> <div class="formErrorColorSupport"> <div id="error_headline" class="stepError hideForErrorAndSteps"></div> </div> </div> </div> <div class="row formRowPad"> <div class="col-sm-12"> <i id="error_icon_description" class="fa fa-fw fromErrorX hideForErrorAndSteps">&#xf00d;</i> <label for="description"> Description: (To emphasize the message) <a href="javascript:;" class="helpHover" tabindex="-1" title="Use this to help emphasize why they should visit your page form. This may not appear in the ad."><i class="fa fa-fw">&#xf05a;</i></a> </label> <div class="input-group date"> <input id="description" class="form-control" rows="3" /> <span class="input-group-addon autopaste helpHover" data-index="7" title="Need ideas for your ad? Click here for examples"> <i class="fa fa-fw fa-lightbulb-o" style="font-size: 20px;"></i> </span> </div> </div> </div> <div class="row formRowPad formOptional" id="websiteOptional"> <div class="col-sm-12 fromLabelLayout"> <label for="website"> Display URL: <a href="javascript:;" class="helpHover" tabindex="-1" title="If you're using a long website address, use a display URL to show a shorter, friendlier URL in the placements it appears in."> <i class="fa fa-fw">&#xf05a;</i> </a> </label> <input id="website" type="text" class="form-control" /> <div class="formErrorColorSupport"><div id="error_website" class="stepError hideForErrorAndSteps"></div></div> </div> </div> {{#enabled_library}} <div class="row formRowPadImage"> <div class="col-sm-12 fromLabelLayout"> <i id="error_icon_dropzone" class="fa fa-fw fromErrorX hideForErrorAndSteps">&#xf00d;</i> <label for="file">Image: (select up to three) <a href="javascript:;" class="helpHover" tabindex="-1" title="Select up to 3 images, and our system will figure out the best image combined with your copy for your offer."><i class="fa fa-fw">&#xf05a;</i></a> </label> </div> <div class="col-sm-12"> <div class="formImageArea txtAlignC"> <div id="dropzone" class="row formImageThumbArea dropzone" style="cursor: pointer;"> <div class="formImageThumbBase"> <i class="fa fa-fw formImageUploadIcon ">&#xf030;</i> <div class="formImageUploadTxt">Click here to select your images.</div> </div> </div> </div> <div class="formErrorColorSupport"> <div id="error_image" class="stepError hideForErrorAndSteps">Please upload at least one image</div> </div> </div> </div> {{/enabled_library}} {{^enabled_library}} <div class="row formRowPadImage"> <div class="col-sm-12"> <i id="error_icon_dropzone" class="fa fa-fw fromErrorX hideForErrorAndSteps">&#xf00d;</i> <label for="file">Image: (upload up to 3 images to test offers) <a href="javascript:;" class="helpHover" tabindex="-1" title="Upload images in 1200x628. If the size does not match, we will automatically crop it for you. You can load up to 3 images, and our system will figure out the best image combined with your copy for your offer."><i class="fa fa-fw">&#xf05a;</i></a></label> </div> <div class="col-sm-12"> <div class="formImageArea txtAlignC"> <div id="dropzone" class="row formImageThumbArea dropzone"></div> </div> <div class="formImageText"> Your image may not include more than 20% text. <br /> <i class="fa fa-picture-o"></i> Need Images? <a class="fancybox fancybox.iframe" href="/Themes/Blue/html/StockSites.html" style="text-decoration: underline;">click here</a> </div> <div class="formErrorColorSupport"> <div id="error_image" class="stepError hideForErrorAndSteps">Please upload at least one image</div> </div> </div> </div> {{/enabled_library}} <div class="row formRowPad"> <div class="col-sm-12"> <label> Call to Action: <a href="javascript:;" class="helpHover" tabindex="-1" title="Please choose you want a customer to take."><i class="fa fa-fw">&#xf05a;</i></a> </label> </div> <div class="col-sm-12"> <select runat="server" class="btn btn-default dropdown-toggle" name="call_to_action2" onchange="Preview.changeDropdownDescription(this.value);" id="call_to_action25c0f07ef08382"><option value="APPLY_NOW">Apply Now</option><option value="DOWNLOAD">Download</option><option value="GET_QUOTE">Get Quote</option><option value="LEARN_MORE">Learn More</option><option selected="selected" value="SIGN_UP">Sign Up</option><option value="SUBSCRIBE">Subscribe</option></select> <div id="call_to_description">Select this button to to tell customers, they are singing up for a mailing list or another service by filling out the form.</div> </div> </div> <div style="margin-bottom: 10px;">Congratulations! You have just created your Facebook Business page.</div> <a href="{{link}}">{{link}}</a> <div style="margin-top: 10px;">You now ready to build some ads!</div> <div style="background-color: #2270ae;color: #FFF; padding: 15px; font-size: 16px;"> Step {{step}} of 2: {{label}} </div> <div style="padding: 7px 15px;font-size: 12px;"> Create a Facebook business page to reach out to the people who matter most to you. <b>Just choose a page type to get started.</b> </div> <div class="row borderColor" style="border-top : 1px solid; font-size:13px;"> <div class="col-sm-12 col-md-6" style="padding:0;"> <div class="pageTypeBlock pageTypeActive" onclick="CreatePage.setType(0);"> <div class="pageTypeImage"> <img src="/Application\_includes\images\cat_icon.png" width="45px" style="margin-top:8px;" /> </div> Local Business or Place <div class="PageSelected"><i class="fa fa-caret-right fa-2x"></i></div> </div> <div class="pageTypeBlock" onclick="CreatePage.setType(1);"> <div class="pageTypeImage"> <img src="/Application\_includes\images\cat_icon.png" width="45px" style="margin-top:-40px;" /> </div> Company Organization or Institution <div class="PageSelected"><i class="fa fa-caret-right fa-2x"></i></div> </div> <div class="pageTypeBlock" onclick="CreatePage.setType(2);"> <div class="pageTypeImage"> <img src="/Application\_includes\images\cat_icon.png" width="45px" style="margin-top:-88px;" /> </div> Brand or Product <div class="PageSelected"><i class="fa fa-caret-right fa-2x"></i></div> </div> <div class="pageTypeBlock" onclick="CreatePage.setType(3);"> <div class="pageTypeImage"> <img src="/Application\_includes\images\cat_icon.png" width="45px" style="margin-top:-134px;" /> </div> Artist, Band or Public Figure <div class="PageSelected"><i class="fa fa-caret-right fa-2x"></i></div> </div> <div class="pageTypeBlock" onclick="CreatePage.setType(4);"> <div class="pageTypeImage"> <img src="/Application\_includes\images\cat_icon.png" width="45px" style="margin-top:-180px;" /> </div> Entertainment <div class="PageSelected"><i class="fa fa-caret-right fa-2x"></i></div> </div> <div class="pageTypeBlock" onclick="CreatePage.setType(5);"> <div class="pageTypeImage"> <img src="/Application\_includes\images\cat_icon.png" width="45px" style="margin-top:-228px;" /> </div> Cause or Community <div class="PageSelected"><i class="fa fa-caret-right fa-2x"></i></div> </div> </div> <div class="col-sm-12 col-md-6 borderColor" id="page_type_block" style="border-left : 1px solid; min-height:276px;"></div> </div> <div style="padding:15px; font-size: 12px;"> <div><b>Type in your business or product name.</b></div> <label class="shim10" for="page_url">http://www.facebook.com/</label> <input id="page_url" type="text" class="form-control" style="height: 29px; width:50%; display:inline-block;" onkeyup="if (!$(this).val()) $('#next_page').addClass('disabled'); else $('#next_page').removeClass('disabled')" /> <div id="error_page_url" class="stepError adNavNull">Error</div> <div style="margin-top:10px">Your page name must:</div> <ul style="list-style-type: disc; list-style-position: inside;"> <li>Use only letters & numbers</li> <li>Na spaces or special characters</li> <li>Not be used by someone else on Facebook</li> </ul> <div style="margin-top:15px; color: #999"> <i class="fa fa-warning"></i> Be careful with this selection. Facebook only allows you to change your Facebook business page URL once. </div> </div> <div class="row"> <div class="col-sm-12 col-md-4" style="padding:20px 5px;"> <b style="padding:5px;">Add your profile image</b> <div id="page_dropzone" class="row formImageThumbArea dropzone"></div> <div style="padding:0 25px 0 5px;font-size: 12px;">Image will be cropped to 180 x 180 pixels</div> </div> <div class="col-sm-12 col-md-8 borderColor" style="border-left : 1px solid;"> <div style="font-size: 12px;margin: 20px 0 10px 5px;"> The profile image will be used on your Facebook business page as well as on your ads. You can change this image at any time. </div> <div style="/*width:100%;*/width: 368px; height:280px; background-image:url(/Application/_includes/media/page_image.png); background-size: 100%;"> <img class="preview_page" src="/User_Content/Partners/1/fb_pageIcon.gif" style="background-color:white; position: absolute;left: 193px;top: 98px;width: 24px;height: 24px;" /> <img class="preview_page" src="/User_Content/Partners/1/fb_pageIcon.gif" style="background-color:white; position: absolute;left: 27px;top: 170px;width: 53px;height: 53px;" /> </div> </div> </div> <label class="shim10" for="page_name">Business or Place Name</label> <input id="page_name" type="text" class="form-control" style="height: 29px;" /> <div id="error_page_name" class="stepError adNavNull" style="margin-bottom:5px;"></div> <label class="adPreviewContainerPosFix" for="page_address">Address</label> <input id="page_address" type="text" class="form-control" style="height: 29px;" /> <div id="error_page_address" class="stepError adNavNull" style="margin-bottom:5px;">Please input an address</div> <label class="adPreviewContainerPosFix" for="page_city">City/State</label> <div class="typeahead-container"> <span class="typeahead-query"> <input id="page_city" class="form-control" style="height: 29px;" autocomplete="off" type="search" /> </span> </div> <div id="error_page_city" class="stepError adNavNull" style="margin-bottom:5px;">Please enter city/state</div> <label class="adPreviewContainerPosFix" for="page_zip">Zip Code</label> <div class="typeahead-container"> <span class="typeahead-query"> <input id="page_zip" class="form-control" style="height: 29px;" autocomplete="off" type="search" /> </span> </div> <div id="error_page_zip" class="stepError adNavNull" style="margin-bottom:5px;">Please enter a zip code</div> <label class="adPreviewContainerPosFix" for="page_phone">Phone Number</label> <input id="page_phone" type="text" class="form-control" style="height: 29px;" onkeypress="input_filter();" onkeyup="changeString(event, this.id)" /> <div id="error_page_phone" class="stepError adNavNull" style="margin-bottom:5px;"></div> <select id="page_category" class="form-control" style="height: 28px;margin-top: 10px;;padding: 0 6px;"> <option value="" selected="1">Choose a category</option> <option value="128966563840349">Airport</option> <option value="133436743388217">Arts &amp; Entertainment</option> <option value="2523">Attractions/Things to Do</option> <option value="180410821995109">Automotive</option> <option value="2512">Bank/Financial Service</option> <option value="110290705711626">Bar</option> <option value="197048876974331">Book Store</option> <option value="187133811318958">Business Service</option> <option value="2101">Club</option> <option value="188662441155211">Community &amp; Government</option> <option value="188234584533149">Doctor</option> <option value="193705277324704">Event Planner</option> <option value="150108431712141">Grocery Store</option> <option value="108427109235243">Home Improvement</option> <option value="133152263416981">Hospital/Clinic</option> <option value="164243073639257">Hotel</option> <option value="209889829023118">Landmark</option> <option value="1607">Lawyer</option> <option value="169896676390222">Library</option> <option value="205854706429555">Licensed Financial Representative</option> <option value="2500">Local Business</option> <option value="145118935550090">Medical &amp; Health</option> <option value="2637">Middle School</option> <option value="192511100766680">Movie Theater</option> <option value="2528">Museum/Art Gallery</option> <option value="2231">Outdoor Gear/Sporting Goods</option> <option value="179943432047564">Performance Venue</option> <option value="144982405562750">Pet Service</option> <option value="176831012360626">Professional Service</option> <option value="2522">Public Places</option> <option value="198327773511962">Real Estate</option> <option value="187714557925874">Religious Organization</option> <option value="1900">Restaurant/Cafe</option> <option value="2601">School</option> <option value="200600219953504">Shopping/Retail</option> <option value="139225689474222">Spas/Beauty/Personal Care</option> <option value="186982054657561">Sports &amp; Recreation</option> <option value="109976259083543">Sports Venue &amp; Stadium</option> <option value="124861974254366">Tours &amp; Sightseeing</option> <option value="145887745471348">Train Station</option> <option value="2505">Transit Stop</option> <option value="2526">Transportation</option> <option value="2602">University</option> </select> <div id="error_page_category" class="stepError adNavNull">Please enter a category</div> <label class="shim10" for="page_name">Company Name</label> <input id="page_name" type="text" class="form-control" style="height: 29px;" /> <div id="error_page_name" class="stepError adNavNull" style="margin-bottom:5px;">Name must be in caps</div> <select id="page_category" class="form-control" style="height: 28px;margin-top: 10px;;padding: 0 6px;"> <option value="" selected="1">Choose a category</option> <option value="2244">Aerospace/Defense</option> <option value="2240">Automobiles and Parts</option> <option value="2234">Bank/Financial Institution</option> <option value="150148928375567">Biotechnology</option> <option value="184395321600410">Cargo &amp; Freight Company</option> <option value="2606">Cause</option> <option value="191334714243008">Chemicals</option> <option value="152880021441864">Community Organization</option> <option value="2200">Company</option> <option value="2255">Computers/Technology</option> <option value="2248">Consulting/Business Service</option> <option value="2250">Education</option> <option value="140234236045713">Elementary School</option> <option value="2238">Energy</option> <option value="2251">Engineering/Construction</option> <option value="2246">Farming/Agriculture</option> <option value="2252">Food/Beverages</option> <option value="161422927240513">Government Organization</option> <option value="2214">Health/Beauty</option> <option value="2243">Health/Medical/Pharmaceuticals</option> <option value="2241">Industrials</option> <option value="2236">Insurance Company</option> <option value="2256">Internet/Software</option> <option value="2249">Legal/Law</option> <option value="2233">Media/News/Publishing</option> <option value="2637">Middle School</option> <option value="2245">Mining/Materials</option> <option value="2235">Non-Governmental Organization (NGO)</option> <option value="2603">Non-Profit Organization</option> <option value="198503866828628">Organization</option> <option value="373543049350668">Political Organization</option> <option value="2618">Political Party</option> <option value="180551801986954">Preschool</option> <option value="187714557925874">Religious Organization</option> <option value="2239">Retail and Consumer Merchandise</option> <option value="2601">School</option> <option value="2237">Small Business</option> <option value="2253">Telecommunication</option> <option value="2257">Tobacco</option> <option value="2258">Travel/Leisure</option> <option value="2602">University</option> </select> <div id="error_page_category" class="stepError adNavNull">Please enter a category</div> <div id="div_city" style="display:none;"> <label class="adPreviewContainerPosFix" for="page_city">City/State</label> <div class="typeahead-container"> <span class="typeahead-query"> <input id="page_city" class="form-control" style="height: 29px;" autocomplete="off" type="search" /> </span> </div> <div id="error_page_city" class="stepError adNavNull" style="margin-bottom:5px;">Please enter city/state</div> </div> <label class="shim10" for="page_name">Brand or Product Name</label> <input id="page_name" type="text" class="form-control" style="height: 29px;" /> <div id="error_page_name" class="stepError adNavNull" style="margin-bottom:5px;">Name must be in caps</div> <select id="page_category" class="form-control" style="height: 28px;margin-top: 10px;;padding: 0 6px;"> <option value="" selected="1">Choose a category</option> <option value="2301">App Page</option> <option value="150060378385891">Appliances</option> <option value="2232">Baby Goods/Kids Goods</option> <option value="2206">Bags/Luggage</option> <option value="2303">Board Game</option> <option value="2216">Building Materials</option> <option value="2208">Camera/Photo</option> <option value="2205">Cars</option> <option value="2209">Clothing</option> <option value="2217">Commercial Equipment</option> <option value="2210">Computers</option> <option value="2263">Drugs</option> <option value="2213">Electronics</option> <option value="2252">Food/Beverages</option> <option value="2219">Furniture</option> <option value="2300">Games/Toys</option> <option value="2214">Health/Beauty</option> <option value="192647794097278">Home Decor</option> <option value="2220">Household Supplies</option> <option value="2226">Jewelry/Watches</option> <option value="132852590115660">Kitchen/Cooking</option> <option value="110249975723427">Office Supplies</option> <option value="2222">Patio/Garden</option> <option value="2230">Pet Supplies</option> <option value="2265">Phone/Tablet</option> <option value="2201">Product/Service</option> <option value="2211">Software</option> <option value="2223">Tools/Equipment</option> <option value="211579738882707">Video Game</option> <option value="2262">Vitamins/Supplements</option> <option value="2202">Website</option> <option value="2224">Wine/Spirits</option> </select> <div id="error_page_category" class="stepError adNavNull">Please enter a category</div> <label class="shim10" for="page_name">Name</label> <input id="page_name" type="text" class="form-control" style="height: 29px;" /> <div id="error_page_name" class="stepError adNavNull" style="margin-bottom:5px;">Name must be in caps</div> <select id="page_category" class="form-control" style="height: 28px;margin-top: 10px;;padding: 0 6px;"> <option value="" selected="1">Choose a category</option> <option value="1103">Actor/Director</option> <option value="1601">Artist</option> <option value="1600">Athlete</option> <option value="1301">Author</option> <option value="361282040719868">Blogger</option> <option value="1609">Business Person</option> <option value="1606">Chef</option> <option value="1802">Coach</option> <option value="1610">Comedian</option> <option value="1614">Dancer</option> <option value="1615">Designer</option> <option value="177246315652372">Entertainer</option> <option value="1617">Entrepreneur</option> <option value="1113">Fictional Character</option> <option value="1701">Government Official</option> <option value="1604">Journalist</option> <option value="1114">Movie Character</option> <option value="180164648685982">Musician/Band</option> <option value="1605">News Personality</option> <option value="2632">Pet</option> <option value="181475575221097">Photographer</option> <option value="1700">Politician</option> <option value="1108">Producer</option> <option value="1602">Public Figure</option> <option value="494338820719492">Scientist</option> <option value="1613">Teacher</option> <option value="1109">Writer</option> </select> <div id="error_page_category" class="stepError adNavNull">Please enter a category</div> <label class="shim10" for="page_name">Name</label> <input id="page_name" type="text" class="form-control" style="height: 29px;" /> <div id="error_page_name" class="stepError adNavNull" style="margin-bottom:5px;">Name must be in caps</div> <select id="page_category" class="form-control" style="height: 28px;margin-top: 10px;;padding: 0 6px;"> <option value="" selected="1">Choose a category</option> <option value="1200">Album</option> <option value="1803">Amateur Sports Team</option> <option value="1300">Book</option> <option value="1309">Book Series</option> <option value="197048876974331">Book Store</option> <option value="1208">Concert Tour</option> <option value="1113">Fictional Character</option> <option value="169896676390222">Library</option> <option value="1307">Magazine</option> <option value="1105">Movie</option> <option value="370369022981015">Movie &amp; Television Studio</option> <option value="1114">Movie Character</option> <option value="192511100766680">Movie Theater</option> <option value="1212">Music Award</option> <option value="1213">Music Chart</option> <option value="1207">Music Video</option> <option value="756092301147942">Performance Art</option> <option value="179943432047564">Performance Venue</option> <option value="627651640670228">Podcast</option> <option value="1210">Radio Station</option> <option value="1211">Record Label</option> <option value="1804">School Sports Team</option> <option value="1201">Song</option> <option value="1800">Sports League</option> <option value="1801">Sports Team</option> <option value="109976259083543">Sports Venue &amp; Stadium</option> <option value="943469559038367">Theatrical Play</option> <option value="1404">TV Channel</option> <option value="1402">TV Network</option> <option value="1400">TV Show</option> <option value="1112">TV/Movie Award</option> </select> <div id="error_page_category" class="stepError adNavNull">Please enter a category</div> <div id="div_city" style="display:none;"> <label class="adPreviewContainerPosFix" for="page_city">City/State</label> <div class="typeahead-container"> <span class="typeahead-query"> <input id="page_city" class="form-control" style="height: 29px;" autocomplete="off" type="search" /> </span> </div> <div id="error_page_city" class="stepError adNavNull" style="margin-bottom:5px;">Please enter city/state</div> </div> <label class="shim10" for="page_name">Cause or Community Name</label> <input id="page_name" type="text" class="form-control" style="height: 29px;" /> <div id="error_page_name" class="stepError adNavNull" style="margin-bottom:5px;">Name must be in caps</div>
<div class="text-center"> <div class="padding chowPad"> <div class="row section-title"> <div class="col-sm-8 col-sm-offset-2"> <h1 class="selectHeader">Choose Your Ad Type</h1> <p class="selectTextColor">Facebook has different types of ads for different purposes. We offer the most useful types for your businesses. Click on the type of ad that best suites your business.</p> </div> </div> <div class="plans"> <div class="row" style="text-align: center;"> {{#rows}} {{#id}} <div class="col-sm-4"> {{#hide_button}} <div class="plan"> <a href="javascript:;"><h2>{{title}}</h2></a> <img src="../../Application/_includes/media/{{image}}" class="selectImg" /> <p class="selectText">{{&description}}</p> {{&additional_text}} </div> {{/hide_button}} {{^hide_button}} <div class="plan" style="cursor: pointer;" onclick="Page.setAdsType({{id}});"> <a href="javascript:;"><h2>{{title}}</h2></a> <img src="../../Application/_includes/media/{{image}}" class="selectImg" /> <div class="planSelectBtn"> <a href="javascript:;" class="btn btn-primary2 selectBtn {{extra_class}} createAdsButton{{id}}">Select</a> </div> <p class="selectText">{{&description}}</p> </div> {{/hide_button}} </div> {{/id}} {{^id}} <div class="{{class}}"></div> {{/id}} {{/rows}} </div> </div> </div> </div> <div class="row"> {{> lead_header}} <div class="row {{formClass}}"> {{> left_column}} {{> rigth_column}} </div> {{> button_next}} </div> <div class="col-sm-12 col-md-6 " style="margin-top: 15px;"> <p id="st4txt" class="formImageTxt" style="font-size: 20px; margin-top: 10px;">To start generating Sales Leads you will need:</p> <p class="step4txt" style="font-size: 17px; margin-bottom: 20px;"> <i class="fa fa-check-square-o"></i> Create an account on Perfect Reach </p> <p class="step4txt" style="font-size: 17px; margin-bottom: 20px;"> <i class="fa fa-check-square-o"></i> A Facebook page. (<a href="https://www.facebook.com/pages/create?url=https%3A%2F%2Fwww.facebook.com%2Fpages%2F" target="_blank"> click here to create one</a>) </p> <p class="step4txt" style="font-size: 17px; margin-bottom: 20px;"> <i class="fa fa-check-square-o"></i> Grant Permission to your Facebook page to run ads </p> <p class="step4txt" style="font-size: 17px; margin-bottom: 20px;"> <i class="fa fa-check-square-o"></i> A link to your business's privacy policy. </p> <p class="step4txt" style="font-size: 17px; margin-bottom: 30px;"> <i class="fa fa-check-square-o"></i> An image for your ad. </p> <div class="regFormArea"> <div class="formHeadline">Create an account</div> <div id="user_container"> <div class="row formPad"> <div class="col-sm-1"></div> <div class="col-sm-10"> <label for="email">Email:<a href="javascript:;" class="helpHover" title="Use your email to log-in to our ad platform"><i class="fa fa-fw">&#xf05a;</i></a></label> </div> <div class="col-sm-1"></div> </div> <div class="row"> <div class="col-sm-1"></div> <div class="col-sm-10"> <input type="email" class="form-control" id="email" /> <div class="formErrorColorSupport"><div class="stepError hideForErrorAndSteps">Please use a valid email format.</div></div> </div> <div class="col-sm-1"></div> </div> </div> <div id="pass_container"> <div class="row formPad "> <div class="col-sm-1"></div> <div class="col-sm-10"> <label for="password">Password:<a href="javascript:;" class="helpHover" title="Use a unique password for maximum security"><i class="fa fa-fw">&#xf05a;</i></a></label> </div> <div class="col-sm-1"></div> </div> <div class="row"> <div class="col-sm-1"></div> <div class="col-sm-10"> <input type="password" class="form-control" id="password" /> <div class="formErrorColorSupport"><div class="stepError hideForErrorAndSteps">Please enter your password.</div></div> </div> <div class="col-sm-1"></div> </div> </div> <div class="row formPad "> <div class="col-sm-1"></div> <div class="col-sm-10"> <label for="Timezone1"> Time Zone: <a href="javascript:;" class="helpHover" title="Set the time zone for your reporting. This can not be changed once your account is created"> <i class="fa fa-fw">&#xf05a;</i> </a> </label> </div> <div class="col-sm-1"></div> </div> <div class="row"> <div class="col-sm-1"></div> <div class="col-sm-10"> <select id="Timezone1" class="form-control" style="width: 150px;padding: 6px 0 6px 6px;"> <option value="PST" selected="selected">PST (Los Angeles)</option> <option value="PNT">PNT (Phoenix)</option> <option value="MST">MST (Denver)</option> <option value="CST">CST (Chicago)</option> <option value="EST">EST (New York)</option> <option value="AST">AST (Alaska)</option> <option value="HST">HST (Hawaii)</option> </select> <div class="formErrorColorSupport"><div class="stepError hideForErrorAndSteps"></div></div> </div> <div class="col-sm-1"></div> </div> <div class="row"> <div class="col-sm-1"></div> <div class="col-sm-10"> <input id="check_terms" type="checkbox" name="terms_conditions" /> <span>I agree to the <a class="fancybox fancybox.iframe" href="/Themes/Blue/html/terms.html">Terms &amp; Conditions</a></span> <div class="clearfix"></div> <input id="check_terms_facebook" type="checkbox" name="terms_conditions" /> <span>I agree to the Facebook <a target="_blank" href="https://www.facebook.com/ads/leadgen/tos">Terms &amp; Conditions</a></span> <div class="formErrorColorSupport"><div id="error_check_terms" class="stepError hideForErrorAndSteps">Please read and agree to the Terms &amp; Conditions.</div></div> </div> <div class="col-sm-1"></div> </div> <div class="txtAlignC formPad"> <a id="btn_create_new" href="javascript:;" class="btn btn-primary txtStrong btn-lg btn-block">Create My Account</a> </div> </div> </div> {{^error}} <div class="col-sm-12 col-md-6 txtAlignC"> <img class="adPreviewLead" src="/Application/_includes/media/PRLead_DemoGif.gif" /> </div> {{/error}} <div class="col-sm-12 col-md-5"> <div class="adpreviewM adpreview adPreviewLeadImage" style=""> <!-- Mobile ad preview --> <div class="adPreviewShell adpreviewMLoc adPreviewLeadAd"> <div class="adPreview_pageIcon clearfix"><img src="{{icon}}" width="40px" height="40px" /></div> <div class="adPreview_topBox"> <div><span class="adPreview_topTxtBold">Your Facebook Page </span></div> <div class="adPreview_nudgePinfo"> <span style="adPreview_postDate">Yesterday</span><span class="adPreview_nudgeglobe"><img src="../Application/_includes/media/fb_world.gif" width="13px" height="13px" /></span></div> </div> <div class="adPreview_description ">Perfect Reach can help you grow your business. Learn more about what we can do for you!</div> <div class="adPreview_image"><img id="adPreview_image" src="../Application/_includes/media/leadAds.jpg" width="320px" height="166px" /></div> <div class="adPreview_offerArea"> <button class="adPreview_btn">Subscribe</button> <div class="adPreview_headline">Free Social Media Marketing Tips</div> <div class="adPreview_exp">www.audiencedelievered.com</div> </div> </div> </div> </div> <div class="stepNextArea txtAlignC"> <a id="next" href="javascript:;" onclick="Page.show_step({{id}})" class="btn btn-primary txtStrong btn-lg disabled">Next</a> </div> <div class="col-sm-12 col-md-5"> <div class="col-sm-12 txtAlignL formImageTxt reportNameSize" style="padding: 0;">Select a sales lead form</div> <div id="leadForms" class="col-sm-12 packagesInfoBox" style="height: 250px; padding: 0; overflow-y: auto;"> {{#rows}} <div class="row leadForm" id="{{id}}"> {{name}} </div> {{/rows}} </div> {{#tablet_page}} <div class="col-sm-12 txtAlignL formImageTxt reportNameSize" style="padding: 0;">or Go to your desktop to create a new lead form</div> {{/tablet_page}} {{^mobile_page}} <div class="col-sm-12 txtAlignL formImageTxt reportNameSize" style="padding: 0;"> <div style="margin:10px 0px 15px 5px;"> or </div> <a href="javascript:;" id="create_lead_form_template" class="btn btn-primary txtStrong btn-lg btn-block" style="margin: 0px 0px 10px 5px"> Create a new sales lead form </a> </div> {{/mobile_page}} {{^lead_tos}} <div class="col-sm-12 pb15" style="padding-left: 0;"> <div class="formErrorColorSupport" style="height: 100%;"> <input id="check_terms_lead" type="checkbox" name="terms_conditions" /> I agree to the <a id="check_terms_lead_href" href="javascript:;">Terms of Services</a> from Facebook. <div class="formErrorColorSupport"><div id="error_check_terms_lead" class="stepError hideForErrorAndSteps">Please read and agree to the Terms &amp; Conditions.</div></div> </div> </div> {{/lead_tos}} <div id="lead_ads_error" class="stepError hideForErrorAndSteps">Please select Sales Lead Form or add new</div> <div class="clearfix"></div> </div> <div class="col-md-1"> </div> <div id="lead_preview"> <div class="col-sm-12 col-md-6 "> <div class="col-sm-12 quickViewBoxArea lead-form"> Template Name: {{temp_name}} <br /> Language: {{locale}} <br /> Date Created: {{date}} <br /> <br /> Sales Lead Form: <div class="col-sm-12 packagesInfoBox" style="height: 250px; color: #000;padding: 15px; overflow-y: auto;"> {{#fullname}} User Information: {{fullname}} <br /> {{/fullname}} {{#email}} User Information: {{email}} <br /> {{/email}} {{#rows}} Question: {{question_name}} <br /> {{/rows}} <!-- User Information: Email <br/> Question: What field of study are you interested in?--> </div> </div> {{#mobile_page}} <div class="col-sm-12 txtAlignL formImageTxt reportNameSize" style="padding: 0;margin-top: 20px;">or Go to your desktop to create a new lead form</div> {{/mobile_page}} </div> </div> <div class="stepContainer step1Img"> <h1 class="stepHead" style="float:left;"><span>Create or select your lead forms</span></h1> {{^login}} <h4 runat="server" style="float:right; margin-right: 10px;" class="stepText tooWideHide" id="loginText25c0f07ef186c1"> Existing users, please <a href="/login" style="color: #FFF;text-decoration: underline;"> Log-In </a> to create your ads </h4> {{/login}} <div class="clearfix"></div> <h4 class="stepText tooWideHide">Create your lead forms. Use preselected questions as they will take in Facebook data.</h4> </div> <div class="row formColor"> <div class="col-sm-1"></div> <div class="col-sm-10"> <div class="row targetQuestion txtAlignL col-sm-12"> Step 1 of 5: Name your form </div> <div class="row"> <div class="col-sm-4 fromLabelLayout"> <label for="lead_form_name"> Name of lead form <a href="javascript:;" class="helpHover" tabindex="-1" title="This will be the list name you will be downloading the lead from later"> <i class="fa fa-fw">&#xf05a;</i> </a> </label> <input id="lead_form_name" type="text" class="form-control" value="My Lead form" /> <div id="error_lead_form_name" class="stepError hideForErrorAndSteps"> You have lead form with this name. </div> </div> <div class="clearfix col-sm-12"></div> <span class="col-sm-12">Use the name we have provied or choose your own (this is only for your reference)</span> </div> <div class="row"> <div class="col-sm-4 fromLabelLayout"> <label for="language"> Language of the sales lead form </label> <select id="locale" class="form-control" style="width: 60%;"> {{#rows}} <option value="{{code}}"> {{name}} </option> {{/rows}} </select> </div> </div> <div class="col-sm-5" style="margin-top: 50px;"> {{> buttons}} </div> </div> <div class="col-sm-1"></div> </div> <div class="row fromLabelLayout"> <div class="col-xs-2 agePadFix"> <a id="back_lead_form" href="javascript:;" onclick="Leads.show_previous_lead_step();" class="btn btn-back txtStrong btn-lg">Back</a> </div> <div class="col-xs-{{#class}}6{{/class}}{{^class}}10{{/class}} agePadFix custom_pl50" style="padding-left: 35px;"> <a id="next_lead_form" href="javascript:;" onclick="Leads.show_next_lead_step();" class="btn btn-primary txtStrong btn-lg disabled">Next</a> </div> {{#class}} <div class="col-xs-4"> <a href="javascript:;" onclick="Leads.skip_this_step();">Skip this step</a> <a href="javascript:;" class="helpHover" tabindex="-1" title=""> <i class="fa fa-fw">&#xf05a;</i> </a> </div> {{/class}} </div> <div class="row fromLabelLayout"> <div class="col-xs-2 agePadFix"> <a id="back_lead_form" href="javascript:;" onclick="Leads.show_previous_lead_step();" class="btn btn-back txtStrong btn-lg">Back</a> </div> <div class="col-xs-10 agePadFix custom_pl50" style="padding-left: 35px;"> <a id="create_lead_form" href="javascript:;" class="btn btn-primary txtStrong btn-lg disabled">Create the lead form</a> </div> </div> <div class="row formColor"> <div class="container"> <div class="col-sm-1"></div> <div class="row targetQuestion txtAlignL col-sm-11" style="margin-bottom: 20px;"> Step 2 of 5: Better inform your customers with a "Context Card" </div> <div class="col-sm-1"></div> <div class="col-sm-5 fromLabelLayout"> <div class="row" style="font-weight: 600;"> <p> You can display additional information about your product or <br /> service before people start filling out your form </p> <span>• Tell users what they will receive</span><br /> <span>• Describe your product or service</span><br /> <span>• Choose between paragraph or bullet formats</span> <div class="radio"> <label style="font-weight: 600;"> <input type="radio" name="create_con_card" value="0" checked="checked" /> Skip the "Context Card" and have customers <br /> go straight to your form </label> </div> <div class="radio"> <label style="font-weight: 600;"> <input type="radio" name="create_con_card" value="1" /> Add a "Context Card" to better inform your customers </label> </div> </div> <div style="margin-top: 50px;"> {{> buttons}} </div> </div> <div class="col-sm-4 fromLabelLayout" style="text-align:center;"> <p style="font-weight: 600;">(Context card example)</p> <img class="leadImg" src="../Application/_includes/media/sample.gif" /> </div> <div class="col-sm-2"></div> </div> </div> <div class="row formColor"> <div class="container"> <div class="row"> <div class="col-sm-1"></div> <div class="row targetQuestion txtAlignL col-sm-10" style="margin-bottom: 20px;"> Step 2 of 5: Better inform your customers with a "Context Card" </div> <div class="col-sm-1"></div> </div> <div class="row"> <div class="col-sm-1"></div> <div class="col-sm-5 fromLabelLayout"> <div class="row" style="font-weight: 600;"> <div class="col-sm-12 agePadFix" style="margin-top: 25px;"> <span id="headline_context_count" style="float:right; color: #9197a3;"></span> <label for="headline_context"> Headline <a href="javascript:;" class="helpHover" tabindex="-1" title="Briefly describe what people will receive"> <i class="fa fa-fw">&#xf05a;</i> </a> </label> <input id="headline_context" placeholder="Briefly describe what people will receive" type="text" class="form-control" data-index="1" maxlength="45" style="word-wrap: break-word;" /> <div id="error_headline_context" class="stepError hideForErrorAndSteps"></div> </div> <div class="clearfix"></div> {{#enabled_library}} <div class="col-sm-12 agePadFix" style="margin-top: 25px;"> <label for="dropzone_lead"> Image <a href="javascript:;" class="helpHover" tabindex="-1" title="Select up to 3 images, and our system will figure out the best image combined with your copy for your offer."> <i class="fa fa-fw">&#xf05a;</i> </a> </label> <div class="formImageArea txtAlignC"> <div id="dropzone_lead" class="row formImageThumbArea dropzone"> <div class="formImageThumbBase"> <i class="fa fa-fw formImageUploadIcon ">&#xf030;</i> <div class="formImageUploadTxt">Click here to select your images.</div> </div> </div> </div> <input id="use_image_in_ad" type="checkbox" name="use_image_in_ad" checked="checked" /> <label for="use_image_in_ad"> Use the same image in my ad <a href="javascript:;" class="helpHover" tabindex="-1" title=""> <i class="fa fa-fw">&#xf05a;</i> </a> </label> </div> {{/enabled_library}} {{^enabled_library}} <div class="col-sm-12 agePadFix" style="margin-top: 25px;"> <label for="dropzone_lead"> Image <a href="javascript:;" class="helpHover" tabindex="-1" title="Upload images in 1200x628. Select up to 3 images, and our system will figure out the best image combined with your copy for your offer."> <i class="fa fa-fw">&#xf05a;</i> </a> </label> <div class="formImageArea txtAlignC"> <div id="dropzone_lead" class="row formImageThumbArea dropzone"></div> </div> <input id="use_image_in_ad" type="checkbox" name="use_image_in_ad" checked="checked" /> <label for="use_image_in_ad"> Use the same image in my ad <a href="javascript:;" class="helpHover" tabindex="-1" title=""> <i class="fa fa-fw">&#xf05a;</i> </a> </label> </div> {{/enabled_library}} <div class="clearfix"></div> <div class="col-sm-12 agePadFix" style="margin-top: 25px;"> <label for="layout"> Layout <a href="javascript:;" class="helpHover" tabindex="-1" title="Enter text that tells people about your product or service"> <i class="fa fa-fw">&#xf05a;</i> </a> </label> <div class="clearfix"></div> <span id="layout_count" style="float:right; color: #9197a3;padding-top: 10px;"></span> <div class="radio" style="margin-left: 25px;float: left;margin-top: 0px;"> <input type="radio" name="layout_buttons" value="LIST_STYLE" checked="checked" /> Bullets </div> <div class="radio" style="margin-left: 35px;float: left;margin-top: 0px;"> <input type="radio" name="layout_buttons" value="PARAGRAPH_STYLE" /> Paragraph </div> </div> <div class="clearfix"></div> <div id="layout_div" class="col-sm-12 agePadFix hide"> <div id="layout" contenteditable="true" class="form-control" data-index="1" placeholder="Enter text that tells people about your product or service" style="overflow-y: auto; min-height: 100px"></div> </div> <div class="clearfix"></div> <div id="bullets" class="col-sm-12 agePadFix hide"> <input id="bullet_1" placeholder="Enter text that tells people about your product or service" type="text" class="form-control" data-index="1" style="margin-bottom: 5px; " maxlength="80" /> <input id="bullet_2" placeholder="" type="text" class="form-control" data-index="1" style="margin-bottom: 5px;" maxlength="80" /> <input id="bullet_3" placeholder="" type="text" class="form-control" data-index="1" style="margin-bottom: 5px; " maxlength="80" /> <input id="bullet_4" placeholder="" type="text" class="form-control" data-index="1" maxlength="80" /> </div> <div class="clearfix"></div> <div id="error_headline_content" class="stepError hideForErrorAndSteps"></div> <div class="col-sm-12 agePadFix" style="margin-top: 25px;"> <span id="button_name_count" style="float:right; color: #9197a3;"></span> <label for="button_name"> Button text <a href="javascript:;" class="helpHover" tabindex="-1" title="Example: Sign Up Now"> <i class="fa fa-fw">&#xf05a;</i> </a> </label> <input id="button_name" type="text" class="form-control" data-index="1" placeholder="Example: Sign Up Now" maxlength="30" /> <div id="error_button_name" class="stepError hideForErrorAndSteps"></div> </div> <div class="clearfix"></div> <div style="margin-top: 50px;"> {{> buttons}} </div> </div> </div> <div class="col-sm-4"> <div class="" style="background-color: #ffffff; min-height: 625px;"> <div id="divContextCardTop" class="demoTopArea" style="text-align: center; padding: 40px 0; min-height: 180px;"> <i class="fa fa-file-image-o" style="font-size: 50px;" aria-hidden="true"></i> <div class="clearfix"></div> <span style="margin-top: 10px; display: block;"> A preview if your image will appear here </span> </div> <img id="adPreview_image" class="hide" src="" width="350px;" height="180px" /> <div class="adPreview_pageIcon clearfix" style="text-align: center;float: none;"> <img src="{{icon}}" width="42px" height="42px" style="margin-top: -20px;border: 2px solid #9197a3;" /> </div> <div class="" style=" text-align: center; font-size: 18px; margin-top: 5px; color: #9197a3; font-weight: 500; "> <span class="">{{name}}</span> </div> <div id="headline_text" style=" text-align: center; font-size: 18px; font-weight: bold; margin: 10px 0; height: 50px;"> Headline Text </div> <div id="layout_text" style=" text-align: left; padding: 10px; height: 310px; word-wrap: break-word; overflow-y: auto;"> </div> <div class="clearfix"></div> <button id="button_name_text" type="button" class="btn btn-primary" style="width:100%;border-radius: 0;">Button name</button> </div> </div> <div class="col-sm-2"></div> </div> </div> </div> <div class="row formColor"> <div class="container"> <div class="row"> <div class="col-sm-1"></div> <div class="row targetQuestion txtAlignL col-sm-10" style="margin-bottom: 20px;"> Step 3 of 5: What information would you like to ask for? </div> <div class="col-sm-1"></div> </div> <div class="row"> <div class="col-sm-1"></div> <div class="col-sm-10 fromLabelLayout"> <div class="row" style="font-weight: 600;"> <p> Only ask questions you need to contact and close a sale.<br /> Asking too many questions reduces the number of people who fill out your form. </p> <div class="row targetQuestion txtAlignL col-sm-12" style="font-weight: 400; padding: 0; margin-top: 25px"> User Information </div> <p>Any of the user information fields can be pre-filled, if a person has included this as part of their Facebook profile.</p> <label class="col-xs-6 col-sm-12 agePadFix"> <input type="checkbox" name="user_info" value="EMAIL" /> <span style="margin: 5px 0;">Email</span> </label> <label class="col-xs-6 col-sm-12 agePadFix"> <input type="checkbox" name="user_info" onclick="Leads.check_options('FULL_NAME');" value="FULL_NAME" /> <span style="margin: 5px 0;">Full Name</span> </label> <p><a id="more_options" href="javascript:;" onclick="Leads.show_options();">[+] More options</a></p> <div id="options" class="hide"> <div class="row"> <div style="margin: 5px 0; font-weight: 800;" class="txtBrandPrimary">Contact info</div> <label class="col-sm-4 col-xs-6 agePadFix"> <input type="checkbox" name="user_info" onclick="Leads.check_options('FIRST_NAME');" value="FIRST_NAME" /> <span style="margin: 5px 0;">First Name</span> </label> <label class="col-sm-4 col-xs-6 agePadFix"> <input type="checkbox" name="user_info" onclick="Leads.check_options('LAST_NAME');" value="LAST_NAME" /> <span style="margin: 5px 0;">Last Name</span> </label> <label class="col-sm-4 col-xs-6 agePadFix"> <input type="checkbox" name="user_info" value="PHONE" /> <span style="margin: 5px 0;">Phone Number</span> </label> <label class="col-sm-4 col-xs-6 agePadFix"> <input type="checkbox" name="user_info" value="STREET_ADDRESS" /> <span style="margin: 5px 0;">Street Address</span> </label> <label class="col-sm-4 col-xs-6 agePadFix"> <input type="checkbox" name="user_info" value="CITY" /> <span style="margin: 5px 0;">City</span> </label> <label class="col-sm-4 col-xs-6 agePadFix"> <input type="checkbox" name="user_info" onclick="Leads.check_options('STATE');" value="STATE" /> <span style="margin: 5px 0;">State</span> </label> <label class="col-sm-4 col-xs-6 agePadFix"> <input type="checkbox" name="user_info" onclick="Leads.check_options('PROVINCE');" value="PROVINCE" /> <span style="margin: 5px 0;">Province</span> </label> <label class="col-sm-4 col-xs-6 agePadFix"> <input type="checkbox" name="user_info" value="COUNTRY" /> <span style="margin: 5px 0;">Country</span> </label> <label class="col-sm-4 col-xs-6 agePadFix"> <input type="checkbox" name="user_info" onclick="Leads.check_options('POST_CODE');" value="POST_CODE" /> <span style="margin: 5px 0;">Post code</span> </label> <label class="col-sm-4 col-xs-6 agePadFix"> <input type="checkbox" name="user_info" onclick="Leads.check_options('ZIP');" value="ZIP" /> <span style="margin: 5px 0;">Zip code</span> </label> </div> <div class="row"> <div style="margin: 5px 0; font-weight: 800;" class="txtBrandPrimary">Demographic Questions</div> <label class="col-sm-4 col-xs-6 agePadFix"> <input type="checkbox" name="user_info" value="DOB" /> <span style="margin: 5px 0;">Date of birth</span> </label> <label class="col-sm-4 col-xs-6 agePadFix"> <input type="checkbox" name="user_info" value="GENDER" /> <span style="margin: 5px 0;">Gender</span> </label> <label class="col-sm-4 col-xs-6 agePadFix"> <input type="checkbox" name="user_info" value="MILITARY_STATUS" /> <span style="margin: 5px 0;">Marital status</span> </label> <label class="col-sm-4 col-xs-6 agePadFix"> <input type="checkbox" name="user_info" value="RELATIONSHIP_STATUS" /> <span style="margin: 5px 0;">Relationship status</span> </label> <label class="col-sm-4 col-xs-6 agePadFix"> <input type="checkbox" name="user_info" value="COMPANY_NAME" /> <span style="margin: 5px 0;">Company name</span> </label> <label class="col-sm-4 col-xs-6 agePadFix"> <input type="checkbox" name="user_info" value="MARITIAL_STATUS" /> <span style="margin: 5px 0;">Military status</span> </label> </div> <div class="row"> <div style="margin: 5px 0; font-weight: 800;" class="txtBrandPrimary">Work Information</div> <label class="col-sm-4 col-xs-6 agePadFix"> <input type="checkbox" name="user_info" value="JOB_TITLE" /> <span style="margin: 5px 0;">Job Title</span> </label> <label class="col-sm-4 col-xs-6 agePadFix"> <input type="checkbox" name="user_info" value="WORK_PHONE_NUMBER" /> <span style="margin: 5px 0;">Work phone number</span> </label> <label class="col-sm-4 col-xs-6 agePadFix"> <input type="checkbox" name="user_info" value="WORK_EMAIL" /> <span style="margin: 5px 0;">Work email</span> </label> </div> </div> <div class="row targetQuestion txtAlignL col-sm-12" style="font-weight: 400; padding: 0; margin-top: 25px"> (optional) Custom Questions </div> <div>In addtion to user information, you can add up to 3 questions.</div> {{> custom_questions}} <div id="text_questions" class="agePadFix col-sm-12 hide" style="margin-bottom: 10px;"> <span> For "Answers" Type and press Enter, to give cstomers a list to choose from. <br /> For open-ended questions, leave the field bland. </span> </div> <div style="margin-top: 10px;" id="ask_custom_question"><a href="javascript:;" onclick="Leads.show_element();"><i class="fa fa-plus-circle" aria-hidden="true"></i> Ask a custom question</a></div> <div class="col-sm-5 agePadFix" style="margin-top: 50px;"> {{> buttons}} </div> </div> </div> <div class="col-sm-1"></div> </div> </div> </div> <div id="question_1" class="custom_questions hide"> <div class="col-xs-12 agePadFix"> <a href="javascript:;" onclick="Leads.hide_element(1);" style="float: right;"><i class="fa fa-times" aria-hidden="true"></i> Delete</a> <div class="col-sm-6" style="margin-top: 10px;"> <label for="question_text_1">Question</label> <input id="question_text_1" type="text" class="form-control" /> </div> <div class="col-sm-6"> </div> </div> <div class="clearfix"></div> <div class="col-sm-6" style="margin-top: 10px;"> <label for="answers_text_1"> Answers <a href="javascript:;" class="helpHover" tabindex="-1" title="Type and press Enter. For open-ended questions, leave the field bland."> <i class="fa fa-fw">&#xf05a;</i> </a> </label> <select id="answers_text_1" class="answers_inputs form-control" multiple="multiple" style="width: 100%"></select> </div> <div class="clearfix"></div> </div> <div id="question_2" class="custom_questions hide"> <div class="col-xs-12 agePadFix"> <a href="javascript:;" onclick="Leads.hide_element(2);" style="float: right;"><i class="fa fa-times" aria-hidden="true"></i> Delete</a> <div class="col-sm-6" style="margin-top: 10px;"> <label for="question_text_2">Question</label> <input id="question_text_2" type="text" class="form-control" /> </div> <div class="col-sm-6"> </div> </div> <div class="clearfix"></div> <div class="col-sm-6" style="margin-top: 10px;"> <label for="answers_text_2"> Answers <a href="javascript:;" class="helpHover" tabindex="-1" title="Type and press Enter. For open-ended questions, leave the field bland."> <i class="fa fa-fw">&#xf05a;</i> </a> </label> <select id="answers_text_2" class="answers_inputs form-control" multiple="multiple" style="width: 100%"></select> </div> <div class="clearfix"></div> </div> <div id="question_3" class="custom_questions hide"> <div class="col-xs-12 agePadFix"> <a href="javascript:;" onclick="Leads.hide_element(3);" style="float: right;"><i class="fa fa-times" aria-hidden="true"></i> Delete</a> <div class="col-sm-6" style="margin-top: 10px;"> <label for="question_text_3">Question</label> <input id="question_text_3" type="text" class="form-control" /> </div> <div class="col-sm-6"> </div> </div> <div class="clearfix"></div> <div class="col-sm-6" style="margin-top: 10px;"> <label for="answers_text_3"> Answers <a href="javascript:;" class="helpHover" tabindex="-1" title="Type and press Enter. For open-ended questions, leave the field bland."> <i class="fa fa-fw">&#xf05a;</i> </a> </label> <select id="answers_text_3" class="answers_inputs form-control" multiple="multiple" style="width: 100%"></select> </div> <div class="clearfix"></div> </div> <div id="error_custom_question" class="stepError hideForErrorAndSteps"></div> <div class="row formColor"> <div class="container"> <div class="row"> <div class="col-sm-1"></div> <div class="row targetQuestion txtAlignL col-sm-10" style="margin-bottom: 20px;"> Step 4 of 5: Your business privacy policy </div> <div class="col-sm-1"></div> </div> <div class="row"> <div class="col-sm-1"></div> <div class="col-sm-10 fromLabelLayout"> <div class="row" style="font-weight: 600;"> <div class="col-sm-12 agePadFix" style="margin-top: 15px;"> <label> Facebook requires a privacy policy for lead ads </label> <div class="radio"> <label style="font-weight: 600;"> <input value="1" type="radio" name="use_ptivacy_policy" checked="checked" /> Use and adhere to the Perfect Reach <a class="fancybox fancybox.iframe" href="/Themes/Blue/html/privacyPolicy.html"> privacy policy </a> </label> </div> <div class="radio"> <label style="font-weight: 600;"> <input value="2" type="radio" name="use_ptivacy_policy" /> Use my own privacy policy </label> </div> </div> <div class="clearfix"></div> <div id="custom_privacy_policy_div" class="row hidden"> <div class="col-sm-4 agePadFix" style="margin-top: 25px;"> <label for="privacy_polacy_link"> Privacy Policy Link <a href="javascript:;" class="helpHover" tabindex="-1" title="Your privacy policy link (URL)"> <i class="fa fa-fw">&#xf05a;</i> </a> </label> <input id="privacy_polacy_link" type="text" class="form-control" data-index="1" /> <div id="error_privacy_polacy_link" class="stepError hideForErrorAndSteps"> Not a valid URL address. </div> </div> <div class="clearfix"></div> Because you will be collecting customer information, you need to include a link to your company's privacy policy. <br /> Your link will appear with Facebook's default privacy disclaimer. <div class="clearfix"></div> <div class="col-sm-4 agePadFix" style="margin-top: 25px;"> <label for="link_text"> Link Text <a href="javascript:;" class="helpHover" tabindex="-1" title="(optional) This is the link text. This is different from your link. It will be the text that the person will click on to get to your privacy policy."> <i class="fa fa-fw">&#xf05a;</i> </a> </label> <input id="link_text" placeholder="Company name privacy policy" type="text" class="form-control" data-index="1" /> </div> <div class="clearfix"></div> Text that links to your privacy policy. We recommend "(company name) privacy policy" <div class="clearfix"></div> <div class="col-sm-4 agePadFix" style="margin-top: 25px;"> <label for="custom_disclaimer"> (Optional) Custom Disclaimer <a href="javascript:;" class="helpHover" tabindex="-1" title="You can add additional notices like marketing opt-ins and legal disclaimers to the default Facebook privacy disclaimer."> <i class="fa fa-fw">&#xf05a;</i> </a> </label> <label class="agePadFix"> <input id="custom_disclaimer" type="checkbox" /> <span style="margin-left: 5px;">Add custom disclaimer</span> </label> </div> <div class="clearfix"></div> You can add additional notices like marketing opt-ins and legal disclaimers to the default Facebook privacy disclaimer. </div> <div class="col-sm-5 agePadFix" style="margin-top: 50px;"> {{> buttons}} </div> </div> </div> <div class="col-sm-1"></div> </div> </div> </div> <div class="row formColor"> <div class="container"> <div class="row"> <div class="col-sm-1"></div> <div class="row targetQuestion txtAlignL col-sm-10" style="margin-bottom: 20px;"> Step 4 of 5: Your business privacy policy. (Add custom disclaimer) </div> <div class="col-sm-1"></div> </div> <div class="row"> <div class="col-sm-1"></div> <div class="col-sm-5 fromLabelLayout"> <div class="row" style="font-weight: 600;"> <div class="col-sm-12 agePadFix" style="margin-top: 25px;"> <span id="title_disclaimer_count" style="float:right; color: #9197a3;"></span> <label for="title_disclaimer"> Title <a href="javascript:;" class="helpHover" tabindex="-1" title="This is your headline of your Terms and Conditions."> <i class="fa fa-fw">&#xf05a;</i> </a> </label> <input id="title_disclaimer" placeholder="Terms and conditions for &lt;business name&gt;" type="text" class="form-control" data-index="1" maxlength="45" /> </div> <div class="clearfix"></div> <div class="col-sm-12 agePadFix" style="margin-top: 25px;"> <div id="add_link" class="hidden"> <a id="add_link_text" href="javascript:;" onclick="Leads.show_link_input(this);">Add Link</a> <div id="link_input_div" class="hidden"> <input id="link_input" type="text" name="link_input" placeholder="http://" /> <a href="javascript:;" onclick="Leads.save_link(this);"><i class="fa fa-check" aria-hidden="true"></i></a> </div> </div> <span style="float:right; color: #9197a3;">To add a link, highlight the words you want to link.</span> <label for="link_text_disclamer"> Text <a href="javascript:;" class="helpHover" tabindex="-1" title="This will be your legal disclaimer for your customers to see."> <i class="fa fa-fw">&#xf05a;</i> </a> </label> <div id="link_text_disclamer" class="form-control" data-index="1" contenteditable="true" style="height:auto; min-height: 34px;"></div> </div> <div class="clearfix"></div> <div class="col-sm-12 agePadFix" style="margin-top: 25px;"> <div class="row targetQuestion txtAlignL col-sm-12" style="font-weight: 400; padding: 0; margin-top: 25px"> (optional) Consent Check Box </div> <span> You can ask people to explicitly agree to your disclaimer or any additional notices. </span> <div id="consents_inputs"></div> <div style="margin-top: 10px;"><a href="javascript:;" onclick="Leads.add_consent_box();"><i class="fa fa-plus-circle" aria-hidden="true"></i> Add a new consent</a></div> </div> <div class="clearfix"></div> <div style="margin-top: 50px;"> {{> buttons}} </div> </div> </div> <div class="col-sm-4"> <div class="" style="background-color: #ffffff;min-height: 625px;"> <div class="demoTopArea" style="text-align: center; padding: 40px 0; min-height: 160px;"> <i class="fa fa-file-image-o" style="font-size: 50px;" aria-hidden="true"></i> <div class="clearfix"></div> <span style="margin-top: 10px; display: block;"> A preview if your image will appear here </span> </div> <div class="adPreview_pageIcon clearfix" style="text-align: center;float: none;"> <img src="{{icon}}" width="42px" height="42px" style="margin-top: -20px;border: 2px solid #9197a3;" /> </div> <div class="" style=" text-align: center; font-size: 18px; margin-top: 5px; color: #9197a3; font-weight: 500; "> <span class="">{{name}} </span> </div> <div style="height: 415px;word-wrap: break-word; overflow-y: auto;"> <div id="terms_title" style=" text-align: center; font-size: 18px; font-weight: bold; margin: 10px 0; "> Terms and conditions for {{name}} </div> <div id="terms_link_text" style="padding: 0 20px; margin: 10px 0; min-height: 75px;"> </div> <div id="contexts_buttons" style="min-height: 50px;"> </div> <div class="clearfix"></div> <div class="clearfix" style=" border-top: 1px solid #9197a3; margin: 20px 20px 0px 20px; "></div> <div style=" padding: 20px; text-align: center; font-size: 12px; color: #9197a3; "> By clicking Submit, you agree to send your info to {{name}} who agrees to use it according to their privacy policy and the above Terms. Facebook will also use it subject to our Data Policy, including to auto-fill forms for ads. <a href="javascript:;">Facebook Data Policy</a> {{&link_privacy}} </div> <div class="clearfix" style=" border-top: 1px solid #999;"></div> <div style="text-align: center;padding: 12px 0;font-weight: bold;font-size: 16px;"> <a href="javascript:;">Next</a> </div> </div> </div> </div> <div class="col-sm-2"></div> </div> </div> </div> {{#rows}} <div class="custom_questions"> <div class="col-sm-12"> <span>Consent {{id}}</span> <a href="javascript:;" onclick="Leads.remove_consent({{id}});" style="float: right;"><i class="fa fa-times" aria-hidden="true"></i> Delete</a> </div> <div class="col-sm-12"> <textarea id="consent_text_{{id}}" type="text" class="form-control">{{text}}</textarea> <div id="error_consent_text_{{id}}" class="stepError hideForErrorAndSteps"> Checkboxes must have different text. </div> </div> <div class="clearfix"></div> <div class="col-sm-12"> <span style="float: left;margin-top: 0px;">Is this consent required?</span> <div class="radio" style="margin-left: 25px;float: left;margin-top: 0px;"> <input type="radio" name="consent_required_{{id}}" value="0" /> No </div> <div class="radio" style="margin-left: 25px;float: left;margin-top: 0px;"> <input type="radio" name="consent_required_{{id}}" value="1" /> Yes </div> </div> <div class="clearfix"></div> </div> {{/rows}} <div class="row formColor"> <div class="container"> <div class="row"> <div class="col-sm-1"></div> <div class="row targetQuestion txtAlignL col-sm-10" style="margin-bottom: 20px;"> Step 4 of 5: Your business privacy policy </div> <div class="col-sm-1"></div> </div> <div class="row"> <div class="col-sm-1"></div> <div class="col-sm-10 fromLabelLayout"> <label> Does your have a business privacy policy <div class="clearfix"></div> <div class="radio" style="margin-left: 25px;float: left;margin-top: 0px;"> <input value="1" type="radio" name="business_privacy_policy_options" checked="checked" /> No </div> <div class="radio" style="margin-left: 25px;float: left;margin-top: 0px;"> <input value="2" type="radio" name="business_privacy_policy_options" /> Yes </div> </label> <div class="clearfix"></div> <span> Facebook requires lead ads to have a link a privacy policy. <br /> You can use our privacy policy <a class="fancybox fancybox.iframe" href="/Themes/Blue/html/privacyPolicy.html"> (linked here) </a> or specify your own by answering "Yes" above. </span> <div class="col-sm-5 agePadFix" style="margin-top: 50px;"> {{> buttons}} </div> </div> <div class="col-sm-1"></div> </div> </div> </div> <div class="row formColor"> <div class="container"> <div class="col-sm-1"></div> <div class="row targetQuestion txtAlignL col-sm-8" style="margin-bottom: 20px;"> Step 5 of 5: Where do you want people to go after they complete your form? </div> <div class="col-sm-3"></div> <div class="clearfix"></div> <div class="col-sm-1"></div> <div class="col-sm-10 fromLabelLayout"> <div class="row" style="font-weight: 600;"> <span>We recommend sending customers to your:</span><br /> <span>• Website</span><br /> <span>• Online review site (e.g. Yelp)</span><br /> <span>• Your Facebook Page</span><br /> <div class="col-sm-8 fromLabelLayout agePadFix"> <label for="link_page"> Link where you want customers to go after they fill out your form </label> <input id="link_page" type="text" class="form-control" data-index="1" style="width: 65%;" /> <div class="formErrorColorSupport"> <div id="error_create_lead" class="stepError hideForErrorAndSteps"> </div> </div> <div class="formErrorColorSupport"> <div id="error_link" class="stepError hideForErrorAndSteps"> Not a valid website address. </div> </div> </div> </div> <div class="row agePadFix" style="height: 50px; "> {{^give_access}} <div class="row errorBox col-sm-6" style="padding: 6px 15px 5px 0px;"> <div class="col-xs-1"><i class="fa fa-fw errorBoxIcon" style="font-size: 17px;">&#xf071;</i></div> <div class="col-xs-11" style="padding-right: 0px;padding-left: 5px;"> <p style="font-size: 12px;margin:0px;">We do not have access to your Facebook Page (<a id="lead_fb_button" href="javascript:;">Click here to give us access</a>)</p> </div> </div> {{/give_access}} </div> <div class="row agePadFix" style="height: 25px; margin-bottom: 5px;"> {{^lead_tos}} <div class="col-sm-12 col-md-12 shim15"> <div class="formErrorColorSupport"> <input id="check_terms_lead" type="checkbox" name="terms_conditions" /> I agree to the <a id="check_terms_lead_href" href="javascript:;">Terms of Services</a> from Facebook. <div class="formErrorColorSupport"> <div id="error_check_terms_lead" class="stepError hideForErrorAndSteps">Please read and agree to the Terms &amp; Conditions.</div> </div> </div> </div> {{/lead_tos}} </div> <div class="col-sm-5 agePadFix custom-lead-col-sm-5"> {{> buttons}} </div> </div> <div class="col-sm-1"></div> </div> </div> {{#packages}} <div class="col-sm-12 col-md-{{md}} packageColPad{{colPad}}"> <input type="radio" name="package" value="{{packageID}}" id="pk_{{packageID}}" onClick="$('#next3').removeClass('disabled');" /> <label class="radio" for="pk_{{packageID}}"> <div id="package{{packageID}}" class="txtAlignC" style="height:20px;visibility: hidden;"></div> <div class="txtAlignC"> <h4 id="pk{{packageID}}_name" class="packagesTitle">{{name}}</h4> <a href="javascript:;" class="helpHover" title="{{title}}"><i class="fa fa-fw">&#xf05a;</i></a> </div> <div class="packagesText packagesTextCopy">{{message}}</div> <div class="packagesInfoBox txtAlignC"> <div class="packagesInfoTxt">Estimated number of times your ads will be seen</div> <div class="packagesInfoNumb" id="InfoNumb{{packageID}}"><span id="InfoNumbSpan{{packageID}}">{{estimatedReach}}</span></div> <div class="packagesInfoTxt" id="infoTxt{{packageID}}">The number your ads will be seen changes on market availabily and performance</div> <div class="packagesInfoTxt2" id="infoTxtWarning{{packageID}}" style="display: none;"> Please <a href="javascript:;" onclick="Page.show_previous_step();" class="lightWarningLink">click here to increase your audience size</a> to increase your ads effectiveness. </div> </div> <div class="packagesInfoNumb txtAlignC"> {{#free}} <s>{{get_budget}}</s> FREE {{/free}} {{^free}} {{get_budget}} {{/free}} </div> <div id="priceBox{{packageID}}" class="packagesInfoPriceBox txtAlignC">Select</div> <h4 class="txtAlignC shim25"><b>Campaign Terms</b></h4> <div class="shim10"> <div class="packagesText"> <i class="fa fa-fw">&#xf14a;</i>Your ads will run for <span id="pk{{packageID}}_duration">{{duration}}</span> days </div> <div class="packagesText"> <i class="fa fa-fw">&#xf14a;</i>Email support </div> {{#fee}} <div class="packagesText"> <i class="fa fa-fw">&#xf14a;</i>Percent of spend charged as fee <a href="javascript:;" class="helpHover" title="{{fee}}%"><i class="fa fa-fw">&#xf05a;</i></a> </div> {{/fee}} </div> </label> </div> {{/packages}}
<a class="fancybox-item fancybox-close" href="javascript:;" data-dismiss="modal" aria-label="Close"></a> <h3 class="targetTxt"><strong>Here are winning {{text}} we use</strong></h3> <p><strong class="targetTxt">Click</strong> on the {{text}} you like to customize</p> <ul id="list" class="form-control selectBox" style="height: 200px; display: block;"> {{#data}} {{#name}} <li data="{{unique_id}}"><i class="fa fa-plus-square-o"></i> {{name}}</li> {{/name}} {{#rows}} <li data="sub-{{unique_id}}" style="padding-left: 20px; {{#name}}display: none;{{/name}}"><i class="fa fa-plus-circle"></i> {{&format}}</li> {{/rows}} {{/data}} </ul> <p>Please note a {{limit}} character limit</p> {{#rows}} {{#start_row}}<div class="row" style="margin-bottom: 5px;">{{/start_row}} <div id="{{id}}" class="grid-image-from-library" title="{{real_name}}" data-title="{{real_name}}"> <span class="glyphicon glyphicon-ok-circle image-library-icon" style="display: none;"></span> <span class="glyphicon glyphicon-remove-sign image-library-remove" style="display: none;" onclick="Page.remove_selected_image(this)"></span> <img src="{{url}}{{sys_name}}" style="width: 140px;" /> </div> {{#end_row}}</div>{{/end_row}} {{/rows}} {{&html}}