Embedding the Planner on your website

Our Embeddable Planner can help your clients and prospects learn more about their insurance needs - while they are on your website. With a few easy steps, you can customize it to work with your website’s color scheme and design. Follow the instructions below.

Add your website to your Account Profile

Before you can embed the planner on your website, you'll need to add your website to your Account Profile. This will make sure the permissions are set so the planner will display correctly.

1. Navigate to your Account Profile by clicking on your Name Account in the top right.
2. In the Company Information section, add/update your website where you'll be embedding the planner. You can add up to three websites. (Note: Website #1 is used for personalizing the downloadable resources.) Click Save to save any changes in this section.

Customize the planner appearance

There are several options that can be used to customize the colors of the planner and the result links before you embed it on your website or it can be used as-is.

1. Navigate to the Embeddable Planner page by clicking on Embeddable Tools Planner in the menu.
2. In the Customize section you'll see the available options for the colors of the planner. To change a color click on the color square and use the color picker to select your new color or enter the six digit color hex code.
   
   
3. The following are where each color appears in the calculator:
   
   
4. In the Customize section you can also update the links used on the results pages of the Embeddable Planner. They are used to guide clients and prospects to learn more about life, disability or long-term care insurance on your website. If left blank, the links will automatically direct to the Insurance 101 sections of lifehappens.org.
   
   

Embed the planner

After adding your website to your Account Profile and customizing the colors and links you can use the embed code to add the planner to your website.

1. To the left of the planner you'll see the embed code.
2. Click the Copy Code button.
3. Paste the code into your website HTML where you'd like the planner to appear. On a PC you can use the shortcut Ctrl+V to paste, and on Mac you can use the shortcut Command+V to paste.
   
   For specific instructions on how to add code into your website HTML we recommend checking your website provider's help documents, as the instructions can vary significantly. Here are links to instructions for some more commonly used website builders:
   • Squarespace
   • Wix
   • GoDaddy
   • Weebly

That's it! You should now see the planner display directly on your website page.