1. Help Center
  2. Ambassadors
  3. Widgets to add to my website

Widget - Insert a commitment banner in your website

To insert a commitment banner in any page of your website, you can copy-paste a piece of HTML code that we provide you with. This will add a panoramic banner explaining your commitment and including a direct link to your forest.

See the screenshot of the banner we will provide you below:

partnership

You will need to copy the code and fill in the information in bold. Insert the code below if your website is in English. For more languages, please contact us

Code to insert
<div style="display:block;width:100%;position:relative;background-image:url(https://tree-nation.com/images/forest-banner/forest-banner-background-1.jpg);background-size:cover;background-position:center;background-repeat:no-repeat;text-align:center;padding:50px 0 80px;font-family:'Source Sans Pro',Lato,Helvetica,Arial,sans-serif;">

<h2 style="color:white;font-size:40px;font-weight:400;margin:0;text-shadow:0px 2px 19px rgba(0,0,0,0.8);">COMPANY NAME's commitment for the Planet</h2>

<p style="color:white;font-size: 18px;font-weight:400;margin:10px 0 20px;text-shadow:0px 2px 19px rgba(0,0,0,0.8);">INSERT YOUR PLANTING COMMITMENT HERE</p>

<a href="https://tree-nation.com/profile/COMPANY-NAME" style="padding:9px 20px;background:white;text-decoration:none;color:#49bb6b;border-radius:4px;font-size:15px;box-shadow:0px 2px 19px rgba(0,0,0,0.2);">Discover our COMPANY NAME forest</a>

<div style="position:absolute;bottom:13px;right:20px;">

<span style="color:white;font-size:14px;font-weight:400;margin-right:10px;text-shadow:0px 2px 19px rgba(0,0,0,0.8);">In partnership with</span>

<img style="width:200px;vertical-align:middle;" src="https://tree-nation.com/images/tree-nation-logo.svg" alt="Tree-Nation logo">

</div>

</div>

Choose a different banner background

If you would like to use a different background image for your banner, you will need to replace the image URL link that you can find in the code above between the first line and second one. This code is hyperlinked that leads to the background image that you can see in the example above.
Look for this link: https://tree-nation.com/images/forest-banner/forest-banner-background-1.jpg

You need to replace this link with the link to the new background image of your choice from the options that are listed below.

Here are your options:

Link: https://f.hubspotusercontent00.net/hubfs/5631208/website_banner_empty_4.png
website_banner_empty_4
Link: https://f.hubspotusercontent00.net/hubfs/5631208/website_banner_empty_6.png
website_banner_empty_6Link: https://f.hubspotusercontent00.net/hubfs/5631208/website_banner_empty.png

website_banner_empty
Link: https://f.hubspotusercontent00.net/hubfs/5631208/website_banner_empty_2.pngwebsite_banner_empty_2
Link: https://f.hubspotusercontent00.net/hubfs/5631208/website_banner_empty_7.png

website_banner_empty_7
Link: https://f.hubspotusercontent00.net/hubfs/5631208/website_banner_empty_8.png

website_banner_empty_8
Link: https://f.hubspotusercontent00.net/hubfs/5631208/website_banner_empty_5.png

website_banner_empty_5
Link: https://f.hubspotusercontent00.net/hubfs/5631208/website_banner_empty_9.png

website_banner_empty_9
Link: https://f.hubspotusercontent00.net/hubfs/5631208/website_banner_empty_3.png

website_banner_empty_3