Using & Promoting Your Partner Tool

When you become a Box Estimator partner, you are given a unique link to your custom tool. Now you just need to share your tool with potential leads. In order to help you make the most of your tool, we’ve outlined some additional information about your link, and how to share it as a hyperlink via email, and a link, button, iframe, or popup via web.

illustration of a computer with open email and a phone

Understanding Your Custom Link

Your link should look similar to this: https://boxestimator.com/app/?id=demo

The underlined portion is what makes your tool unique to you, and triggers the customized header as well as telling your tool to send quote requests to your designated email address. It is therefore important to never modify or shorten your link, as this can result in your tool failing to send you quote requests.

Sharing Your Tool Via Email

There are a couple of ways to share your link via email. The first is to simply type in the link as-is, as most email applications will recognize links and automatically hyperlink them. When you use this method, your link should look similar to this: https://boxestimator.com/app/?id=demo

The other method is to write out the text you want to link, and manually hyperlink it. This can be done by highlighting to text you want to hyperlink, and either pressing CTRL (or COMMAND on Macs) + K, or right clicking and selecting “Hyperlink”. You will then be prompted to enter the link you want to use, at which point you should enter the full link to your custom tool. Using this method allows you to create a custom call-to-action, as you can link any text you to look like this: Click Here!

Sharing Your Tool Via Web

How you exactly you share your tool on your website depends on the end look you want and how comfortable you are with basic HTML/CSS. There are three main methods: creating a link, creating a button, and embedding your form via an iframe.

This is the simplest method of sharing your custom tool. If your website was built using a CMS or website builder (like WordPress or Squarespace), just use the method you normally use for adding links. If your website was hard-coded, you can paste the following code wherever you want your link to appear, just swap out the text after “?id=” with the text in this portion of your custom link.

<a href="https://boxestimator.com/app/?id=yourcustomlink">Click Here!</a>

Creating a Button

Again, if your website was built using a CMS or website builder (like WordPress or Squarespace), just use the method you normally use for adding a button. If your website was hard-coded, you can paste the following HTML wherever you want your button to appear, and add the CSS to your stylesheet. Remember to swap out the text after “?id=” with the text in this portion of your custom link. You can change the “color”, “border-color”, and “background-color” properties to edit the color of your button and text.

HTML

<a href="https://boxestimator.com/app/?id=yourcustomlink" class="button_custom">Click Here!</a>

CSS

.button_custom {
	background-color:#4d82de;
	border:2px solid #4d82de;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-size:18px;
	padding:16px 31px;
	text-decoration:none;
}
.button_custom:hover {
	background-color:#476e9e;
}
.button_custom:active {
	position:relative;
	top:1px;
}

Embedding Via iFrame

This method allows you to embed your form directly on your website like the example below. Paste the following HTML wherever you want your form to appear. If you want your iframe to show your form without the header, make sure to add the provided CSS to your stylesheet as well. You can change the width, height, and border to adjust the appearance of your embedded form. Remember to swap out the text after “?id=” with the text in this portion of your custom link.

iFrame without Header HTML

<div style="overflow: hidden; height:700px; width:100%;border:1px solid #c5c9cc">
<iframe src="https://boxestimator.com/app/?id=demo" width="100%"  >
</iframe>
</div>

iFrame without Header CSS

iframe {
  position: relative; 
  top: -145px;
  height:845px;
}

@media screen and (max-width:980px) {
  iframe {
  position: relative; 
  top: -205px;
  height:905px;
}
}

iFrame with Header HTML

<iframe src="https://boxestimator.com/app/?id=demo" width="100%" height="700px" style="border:1px solid #c5c9cc"></iframe>

iFrame Example (shown without header)


Creating a Popup

This is the most complicated method, as it combines a basic iframe with css and javascript to display and hide the popup. When using this method, leave the href property blank in your html, and instead put your custom link in the provided javascript. Remember to swap out the text after “?id=” with the text in this portion of your custom link.

HTML

<div id="main_content">
<a href="" id="popup_link">Click me</a><br>
</div><div id="popup"><iframe id="popupiframe"></iframe></div>
<div id="popupdarkbg"></div>

CSS

#popup {
display: none; 
position: fixed;
top: 12%;
left: 15%;
width: 70%;
height: 70%;
background-color: white;
z-index: 9999; 
}

#popup iframe {
width: 100%;
height: 100%;
border: 0; 
}

#popupdarkbg {
position: fixed;
z-index: 999;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: hidden;
background-color: rgba(0,0,0,.75);
display: none;
}

Javascript

document.getElementById("popup_link").onclick = function(e) {
  e.preventDefault();
  document.getElementById("popupdarkbg").style.display = "block";
  document.getElementById("popup").style.display = "block";
  document.getElementById('popupiframe').src = "https://boxestimator.com/app/?id=demo";
  document.getElementById('popupdarkbg').onclick = function() {
      document.getElementById("popup").style.display = "none";
      document.getElementById("popupdarkbg").style.display = "none";
  };
  return false;
}

window.onkeydown = function(e) {
    if (e.keyCode == 27) {
      document.getElementById("popup").style.display = "none";
      document.getElementById("popupdarkbg").style.display = "none";
      e.preventDefault();
      return;
    }
}

Popup Example

Click me