With the Embed Code component, you can add all kinds of third party widgets and code to a page of your site. You can also add your own code for your own custom page elements. To get started, drag the Embed Code component to a page of your site in the website editor. Next, click on the component to open the options panel.
Note: In order to use this component you’ll need to upgrade your site to a paid plan.
Code
At the top of the list of options is the code field, where you’ll paste in or add your custom code. If you need a bit more space, you can click and drag the corner of the field down to increase the viewing size.
Size & Position
There are two options available to control the size and position of your embedded widget or code:
- Width - This option sets how much of the width of the component is used by your embedded code. By default this is set to full, but you can change this to smaller proportions. You can also set this separately for different screen sizes by clicking the desktop/mobile icon.
- Align - With a width set to something other than full, you can use this option to align your embedded code to the left, right, or center of the component.
Design
Options within this group control the styling of the component:
- Shape - By default this option uses what you have set in your site settings, though you can override that to something else. You can also set this separately for different screen sizes by clicking the desktop/mobile icon.
- Border - With this option you can add a border around your embedded code, and set the width, style, and color of the border.
Spacing
To control spacing with the component, Margin controls how much space is around your embedded code, and Padding controls the space between the border and the embedded code itself. Both options can be set separately for different screen sizes.
Hover
To control how the border looks when hovering over the component with a mouse, click on Hover at the top of the options panel. You can change the width, style, and color of the border.