How to embed widgets into a webpage
Getsitecontrol’s Inline feature allows you to create and embed stylish widgets as shown below into your website.
Inline widgets are a discreet addition to your website: as they merge seamlessly with the webpage, they allow visitors to focus on the main content of your site – without interrupting their experience.
In this tutorial, we’ll cover the steps of the creation process and provide instructions for embedding widgets into different website platforms. Feel free to use the menu on the right to navigate the content of this article.
How to create an inline widget
To create an inline widget, click the + Create widget button in the All widgets tab of the dashboard.
In Getsitecontrol, there are three methods you can use to create a widget that you can then embed into the webpage:
Starting from scratch
For the first method, select Start from scratch in the tooltip popup. Next, select the Inline category from the top bar:
Once you’ve selected the template that best suits your needs from the right panel, you can proceed to customize it. Watch our tutorial on how to create a popup from scratch to learn how to work on your template.
Let’s move on to the second method to create an inline widget.
Using Premade widgets
Premade widgets are templates that have already been partially set up for you. You'll find premade inline widgets at the bottom of the premade gallery:
Premade widgets can be used as they are or customized to match the style of your website.
Using Design ideas
For the last method, select Design ideas from the popup window to explore the template gallery. You can find inline templates in each section of the gallery, at the bottom of the page:
Open the template of your choice and click the Take this template button to bring it to the widget editor. Customize the template however you prefer: enter your own copy, change the font, color theme, image, etc.
❗ Note that, whatever method you choose, you’ll only be able to embed widgets that belong to the Inline type. This process won’t work with any other type of widget.
When you are happy with how your widget looks, move on to the Targeting tab in the widget editor.
❗ Make sure to keep the default page targeting settings, where the widget is set to appear on every page of the website:
Although the settings dictate that the widget will be displayed on every page of your website, the inline widget will actually only appear on the page(s) where you’ll add its code (see next sections for further details).
When you are done, save and close your widget. You’ll then see a tooltip popup featuring the code for embedding:
If you have a Shopify Online Store 2.0, the tooltip popup will look like this:
❗ Don’t forget to click Activate now and activate your inline widget to be able to display it on your website later.
Let’s now discuss how to embed widgets into different website platforms, starting from Shopify.
How to embed widgets into a Shopify store (2.0 theme editor)
This method works for Shopify Online Store 2.0 theme editor only. If that applies to your store, follow the steps below or watch our video guide:
First, add a new section to your theme.
In the dropdown menu, scroll down to Apps and select Inline widget.
Then, open your Getsitecontrol dashboard.
Copy the ID of the widget you want to embed.
Paste the widget ID into the corresponding field in your Shopify theme editor.
That’s it! The widget setup is now complete. After you save the changes, the widget will appear as a part of your site.
How to embed widgets into a WordPress site
If you have a WordPress website, you can embed a Getsitecontrol widget using Custom HTML blocks. All you’ll need to do is copy the widget’s embedding code and paste it into your HTML block.
First, copy the code from the Embed section of your Getsitecontrol dashboard:
Next, go to your WordPress site editor and add a Custom HTML block to the page where you want to display your widget:
Paste the widget’s embedding code into the HTML field:
Finally, place the block where you want it to appear on your webpage and save the changes.
Done! Now the Getsitecontrol widget is a part of your site.
How to embed widgets into any other website
It’s possible to embed widgets into any website by following a common procedure.
First, copy the code from the Embed section:
Next, paste the embedding code into the code of your website, right where the widget should appear:
❗ Please, note that you should add the Getsitecontrol installation code to the code of your website beforehand.
That’s all you need to do. After you save the changes to your website, the widget will appear where you specified.
If you have any issues while creating an inline widget or embedding it into your site, do not hesitate to reach out to our Tech Support team.