How to Add Custom Code to Your Site
Embed widgets and scripts on your website
Marketing Team avatar
Written by Marketing Team
Updated over a week ago

You might have an affiliate logo or widget you want to embed on your site. Usually they provide a snippet of code. There are several ways to add code to your website. The most common ways are to either add the code to a code block or a widget.

How to add a code block

A code block is a customizable block that you can add to any page of your site. This is ideal for something you only want to display on one page (as opposed to something you want to appear in a sidebar, footer, etc)

Go to the page you want to add your code to and select the Code Block element from the Avia Layout Builder.

Click and drag it to wherever you want it to appear on your site. Then copy and paste your code and hit save.

Update your page and take a look!

If it didn't work or looks weird, try moving it somewhere else on the page or contact us for help!

How to create a widget

A widget is a customizable block that you can add to any area of your website. This is ideal for affiliate logos that you want to display on multiple pages of your website.

Go to Appearance - Widgets and add a new widget area. Name it after whatever the code is for so you can find it easily. In this example, we're adding a Home Advisor widget.

After you've created the widget area, drag the "Csutom HTML" widget into your new widget area.

Then, copy and paste your code snippet into the Custom HTML content window. Don't worry about giving it a title unless you want one. Click Save and Done.

Now, decide where you want the widget to go. Open the page where you want to add the widget and go to Avia Layout Builder - Content Elements and select "Widget Area".

Drag the widget area to wherever you want it to go on the page just like with any other layout element. Then select the custom widget area you set up from the dropdown.

Save your page and take a look! It should have worked.

Now, if you want to add the widget to the footer of your website so that it shows up on every page, just go back to Appearance - Widgets and make a copy of the Custom HTML widget for your Footer widget area. *Note - your website may have a custom footer if it was built with extra love. In this case, go to Pages - Footer and add the widget just like we did in the above example.

Did this answer your question?