How to Add a Healthy Work Widget to Your Website

This post will walk you through everything you need to know to add any of our widgets to your website. For best practices and inspiration for how to use widgets throughout your site, read this post.

In general, this is how it works:

  1. After you have customized your Healthy Work widget, click the “Add to Website” button.

Healthy Work widget

  1. A modal will pop up with your widget embed code. Click “Copy to Clipboard”. Now you're ready to add this widget to your website. Below, we have created some instructions for popular platforms.

Copy widget

Looking for specific platform instructions?

Squarespace
Wordpress
Wix
Weebly

Squarespace

  1. Go to Squarespace and edit the particular page where you want to embed the Healthy Work widget. Select a location on your page to add a content block and search for “Code”.

Squarespace instructions 1

  1. Copy the widget code into the text block and click "Apply".

Squarespace instructions 2

  1. Save your page (remember you can add spacers around your widget if you want to customize the look on your webpage).

Squarespace instructions 3

  1. Preview your website and you should see your widget! Remember, you can continue to edit your widget in Healthy Work once its embedded on your website (you don't have to update the code on your website.) Any results will display on your Healthy Work dashboard.

Squarespace instructions 4

Wordpress

Depending on your version/page builder plugins, the steps to add a Healthy Work widget may vary. In general, the flow is add block > custom html > position > save.

Here is an example from the popular page builder: Beaver Builder.

  1. Launch the Beaver Builder on the particular page you want to edit. Add a row to your layout and then add "HTML".

Wordpress instructions 1

  1. Copy the widget code into the HTML block and click "Save"

Wordpress instructions 2

  1. Preview the widget and make sure the layout & positioning works. Once completed, click "Done". Preview your website and you should see your widget! Remember, you can continue to edit your widget in Healthy Work once embedded on your website (you don't have to update the code on your website.) Any results will display on your Healthy Work dashboard.

Wordpress instructions 3

Using the standard Wordpress editor?

  1. Go to the particular page you want to edit and add a "Custom HTML" block.

Wordpress old instructions 1

  1. Copy the widget code into the HTML block.

Wordpress old instructions 2

  1. You can preview the widget and then update the page. Remember, you can continue to edit your widget in Healthy Work once embedded on your website (you don't have to update the code on your website.) Any results will display on your Healthy Work dashboard.

Wordpress old instructions 3

Wix

1. Go to Wix and edit the particular page you want to embed the Healthy Work widget. Depending on your layout you may want to start by adding a "strip" to your page.

Wix instructions 1

  1. Click "Add" > "More" and click "HTML iFrame".

Wix instructions 2

  1. Click "Enter Code".

Wix instructions 3

  1. Copy the widget code into the text block and click "Apply".

Wix instructions 4

  1. You will likely have to drag the edges to make sure the widget is visible and fits.

Wix instructions 5

  1. Preview your website and you should see your widget! Remember, you can continue to edit your widget in Healthy Work once embedded on your website (you don't have to update the code on your website.) Any results will display on your Healthy Work dashboard.

Wix instructions 6

Weebly

1. Go to the particular page you want to edit and add an "Embedded Code" block.

Weebly instructions 1

  1. Click "Edit Custom HTML"

Weebly instructions 2

  1. Preview the widget and click "Publish". Remember, you can continue to edit your widget in Healthy Work once embedded on your website (you don't have to update the code on your website.) Any results will display on your Healthy Work dashboard.

Weebly instructions 3

View More Blog Posts

Created by

Danielle Reynolds-Flatt

Danielle Reynolds-Flatt is a nutritionist, entrepreneur, marketing nerd, and cat lady.