How to use Widgets
Kevin Croy avatar
Written by Kevin Croy
Updated over a week ago

Have you ever wanted to put your Marvelous calendar directly into your website? Then widgets are for you! All you have to do is navigate to the widgets page in your teacher dashboard (Settings -> Widgets) and select one of the widgets that you'd like to place in your own website. Once you've found the widget you like, you can click the 'copy code' button and all of the code you need will be copied into your clipboard automatically. From there, we just need to add that HTML (the code you copied) into your website. The process of adding the code into your website can vary based on how your website is set up, but here are a couple common website hosts instructions:

Squarespace

  1. Select a page you want to Edit

  2. Click on β€œ+” sign OR click on the line bubble to add a Block

  3. Choose the Code block underneath the More section

  4. Remove the default code Squarespace puts into its Code block

  5. Insert the HTML code you want to add

  6. Click the Apply button

Wix

First, navigate to Embed -> Custom Embeds and click on the button that says Embed a Widget (like the screenshot below)

Then, follow the instructions below:

  1. Click Add

    on the left side of the Editor.

  2. Click Embed.

  3. Select Embed a Widget to add an iFrame to your page.

  4. Embed your code:

    1. Click Enter Code.

    2. Paste your custom code in the text box.

    3. Click Apply.

Weebly

  1. Click on the Custom HTML element to bring up the popup.

  2. Copy your code for the Marvelous widget

  3. Then click Edit Custom HTML in the popup.

  4. Paste the embed code into the element.

  5. Click outside of the element, and your content should appear!

Wordpress

  1. Click on Themes on the left then Widgets.

    Make sure that your theme allows widgets. If you cannot see Widgets under Themes then it means the theme you're using doesn't allow widgets.

  2. Click on the block then browse all.

  3. Scroll down to Widgets and click on Custom HTML.

  4. Paste the code from Marvelous that can be found here and click Update.


That's it! You're done! Your Marvelous calendar should show up on your website, ready to show to all of your students!

Contact Us 🧑

For any questions reach out to us in our live chat or send us an email at team@heymarvelous.com πŸ™‚

Did this answer your question?