Elfsight

Elfsight is a platform that provides embeddable widgets for displaying social media feeds, reviews, forms, and other interactive elements on websites.

Key features include:

Social media feed widgets
Review and testimonial widgets
Contact, form, and communication widgets

Elfsight integrates with ShopWired by providing that is added to your ShopWired theme or website pages so that widgets can display where required.

ShopWired can only provide support for the instructions provided in this help guide. For assistance with your Elfsight account, contact Elfsight support directly.

Account creation

Create an account on the Elfsight website
Once your account is created, configure the widget you want to use and obtain the widget script and embed container provided by Elfsight.

Theme installation

To display the widget on every page of your website, once the widget is configured, Elfsight provides a script similar to the example shown below:

<script src="https://elfsightcdn.com/platform.js" async></script>

The script shown above is provided as an example only. You must copy the exact script provided in your own account, as the script and any ID values will be unique to your website.

Add the script to your theme’s master.twig file so that it is loaded on every page of your website.

Navigate to Website > Themes
Select the code editor option for the theme you want to edit
Open the master.twig file
Add the script just above the closing </head> tag
Add the widget’s embed container in the location where you want the widget to appear
Select Save changes

Adding widgets to pages

Widgets can be displayed on individual pages by adding the widget script and embed container to a custom HTML area.

An example of an embed container is shown below:

<div class="elfsight-app-xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx" data-elfsight-app-lazy></div>

The embed container shown above is provided as an example only. You must copy the exact embed container provided in your own account, as the embed container and any ID values will be unique to your website.

To display the widget on a landing page, add the widget script and embed container to a custom HTML section using the theme editor.

Navigate to Website > Themes
Select customise your theme for the theme you want to use
Select add a new section
Select the custom HTML section type
Paste the widget script and embed container into the Custom HTML setting
Select out of the section and use the theme editor to position the widget on the page

Use ShopWired’s landing pages feature to add the widget to a custom page on your website. If you want to add the widget to a website page, select the Tick here to enter additional custom HTML/JS/CSS setting to add the code.

Adding multiple widgets

Each Elfsight widget provides a unique script and embed container.

If you want to use more than one widget, add the full code provided for each widget to the relevant theme or page location where the widget should display.

Recommendations