embed on website: iframe Option 1

Step 1

<div style="margin-bottom: 16px 8px 24px 8px">
  <div style="position: relative; overflow: hidden; min-height: 800px; margin: auto;">
   <iframe style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;" src="https://foodwaste.plantjammer.com/?api_key=[YOUR_API_KEY]&tagId=[YOUR_TAG_ID]"></iframe>
  </div>
</div>

Step 2

Step 3

embed on website: iframe Option 2

Step 1

<style>
  .container { padding: 50px; }
  .widget-wrapper {
/* On big screen: change height and width of the widget */
min-height: 800px;
}
@media (max-width: 576px) {
.container { padding: 20px 0 20px 0; }
.widget-wrapper {
/* On small screen: change height and width of the widget */
min-height: 700px;
  }
}
</style>

Step 2

Step 3

<div class="container">
<div class="widget-wrapper" style="position: relative; overflow: hidden; margin: auto; min-width:auto"> <iframe style="position: absolute; top: 0; left: 0; width: 100%; height:100%; border: 0;"src="https://foodwaste.plantjammer.com?api_key=[YOUR_API_KEY]&tagId=[YOUR_TAG_ID]"></iframe> </div></div>

Step 4

Step 5

Button in a box: option 1 - squared box

Step 1

<div style="
   box-sizing: border-box;
   height: 230px;
   display: flex;
   background-image: url(https://images.unsplash.com/photo-1590779032260-5623d6774f7a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80);
   object-fit: cover;
   background-position: center center;
   background-size: cover;
   box-shadow: 3px 4px 15px rgba(0, 0, 0, 0.25);
   border-radius: 4px;
   font-family: Arial;
">
   <div style="
   display: flex;
   flex-direction: column;
   justify-content: center;
   padding: 20px;
   background-color: rgba(0, 138, 88, 0.75);
   color: white;
   width: 60%;
   border-radius: 4px 0 0 4px;
">
     <div style="
   margin: 0;
   font-size: 24px;
   color: white;">Inspiration</div>
     <div style="
   font-size: 16px;
   margin: 16px 0;    
   color: white;">
       Empty your fridge with this tool.
     </div>
     <button style="
   background-color: white;
   color: #008A58;
   text-align: center;
   text-decoration: none;
   display: inline-block;
   max-width: 200px;
   min-height: 40px;
   border: none;
   line-height: 16px;
   min-width: min-content;
   border-radius: 50px;
   font-weight: bold;
   padding: 0 10px 0 10px;
   font-size: 13px;
" onclick="window.open(
         'https://foodwaste.plantjammer.com?font_url=&api_key=[YOUR_API_KEY]&tagId=[YOUR_TAG_ID]', '_blank');">Empty your fridge</button>
   </div>
 </div>

Step 2

Step 3

Button in a box: Option 2 - responsive to screen width

Step 1

<div class="eyf-container">
   <div class="eyf-content">
     <h2 class="eyf-content__heading">Empty Your Fridge</h2>
     <p class="eyf-content__paragraph">
       Create recipes customized to your needs. Only have 2 ingredients at home? Or urgently need to cook that
       broccoli before it goes bad?
     </p>
     <button class="eyf-content__button" onclick="window.open(
         'https://foodwaste.plantjammer.com?font_url=&api_key=[YOUR_API_KEY]&tagId=[YOUR_TAG_ID]', '_blank');">Create Recipes with
       AI</button>
   </div>
 </div>

Step 2

Step 3

Step 4

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;700&display=swap');    .eyf-container {
     box-sizing: border-box;
     font-family: 'Poppins';
     height: 230px;
     display: flex;
     background-image: url(https://images.unsplash.com/photo-1590779032260-5623d6774f7a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80);
     background-position: center center;
     background-size: cover;
     box-shadow: 3px 4px 15px rgba(0, 0, 0, 0.25);
     border-radius: 4px;
   }    .eyf-content {
     display: flex;
     flex-direction: column;
     justify-content: center;
     padding: 30px;
     background-color: rgba(0, 138, 88, 0.75);
     width: 40%;
     border-radius: 4px 0 0 4px;
   }    .eyf-content__heading {
     margin: 0;
     font-size: 26px;
     color: white;
   }    .eyf-content__paragraph {
     text-align: start;
     font-size: 14px;
     color: white;
     line-height: 21px;
   }    .eyf-content__button {
     background-color: white;
     color: #008A58;
     text-align: center;
     text-decoration: none;
     display: inline-block;
     max-width: 200px;
     min-height: 40px;
     border: none;
     white-space: nowrap;
     min-width: min-content;
     border-radius: 50px;
     font-size: 12px;
     font-weight: bold;
     padding: 0 20px 0 20px;
   }    @media (max-width: 750px) {
     .eyf-container {
       padding: 15px;
     }      .eyf-content {
       flex-grow: 1;
       align-items: center;
       padding-left: 10px;
       padding-right: 10px;
       border-radius: 4px;
     }      .eyf-content__heading {
       font-size: 20px;
       text-align: center;
     }      .eyf-content__paragraph {
       text-align: center;
       font-size: 12px;
       line-height: 18px;
     }      .eyf-content__button {
       font-size: 11px;
       min-height: 35px;
     }
   }

Step 5