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:

p1ddlrnq6ksu315fj60l1opipeh3

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/forest-banner/forest-banner-logo.png" 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 and second line. This code is hyperlinked and 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 choosing for which the options you have 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_6

Link: 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