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.

Example of inline widget featured on a website

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.

The +Create widget button in the Getsitecontrol dashboard

In Getsitecontrol, there are three methods you can use to create a widget that you can then embed into the webpage:

The three methods to create an inline widget with Getsitecontrol

Starting from scratch

For the first method, select Start from scratch in the tooltip popup. Next, select the Inline category from the top bar:

Selecting the Inline category in the Start from Scratch screen

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 inline widget templates

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:

The inline widgets in the ‘Design ideas’ template gallery

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.

Custom inline widget example

❗ 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:

The default page targeting settings

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:

Tooltip popup with embedding code

If you have a Shopify Online Store 2.0, the tooltip popup will look like this:

Tooltip popup with embedding code - Shopify

❗ 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.

Adding a new section to the theme

In the dropdown menu, scroll down to Apps and select Inline widget.

Selecting Inline widget from the dropdown menu

Then, open your Getsitecontrol dashboard.

Opening the Getsitecontrol dashboard from the Shopify theme editor

Copy the ID of the widget you want to embed.

Copying the widget ID from the Getsitecontrol dashboard

Paste the widget ID into the corresponding field in your Shopify theme editor.

Pasting the ID into the corresponding field in the 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:

Copying the embedding code from the 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:

Adding a Custom HTML block to the WordPress site

Paste the widget’s embedding code into the HTML field:

Pasting the embedding code into the HTML field

Finally, place the block where you want it to appear on your webpage and save the changes.

Getsitecontrol inline widget displayed on a WordPress website

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:

Getsitecontrol inline widget displayed on a WordPress website

Next, paste the embedding code into the code of your website, right where the widget should appear:

Copying the embedding code from the Getsitecontrol dashboard

❗ 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.

Browse by category