/
Dashboard

How to Install the widget on Magento

This document covers the installation steps required to integrate Social9 with your Magento website

Outline

  1. Get The Code Snippet From Social9 Console
  2. Add Script In Magento Control Panel
  3. Cache Management
  4. Additional Setup For Inline(Horizontal) Widgets

Get The Code Snippet From Social9 Console

Copy the one-time installation code snippet under the magento installation guide section of the Social9 Console. This should look similar to,

<script
  id="s9-sdk"
  async
  defer
  content="<REPLACE WITH YOUR USER ID>"
  src="//cdn.social9.com/js/socialshare.min.js"
></script>

Add Script In Magento Control Panel

Login to your Magento Marketplace Account.

Under your dashboard, select the Content > Design > Configuration section from your left navigation bar.

Magento Configuration

Select the website that you'd like to configure and click on Edit under the Action table header.

Magento Edit Site

Select HTML Head under Other Settings.

Magento Other Settings

Scroll down to Scripts and Style Sheets field and paste the code snippet copied from your Social9 console covered in Step 1.

Magento Scripts and Style Sheets

Click on Save Configuration in the top right to keep the changes.

Cache Management

After saving, you may see a message that asks you to visit Cache Management to refresh cache types. Click on the link displayed to visit the Cache Management section.

Magento Cache Message

Click on Flush Magento Cache following which you should see a confirmation message that the cache has been flushed.

Magento Flush Cache

Additional Setup For Inline(Horizontal) Widgets

If you'd like to configure an inline widget in your site (i.e. when the widget is placed side-by-side with your page content with a horizontal view), just add this additional code snippet where ever you want the widget to be rendered.

<div class="s9-widget-wrapper"></div>

Inline Widget For Developers

You can create or configure inline widgets under the social9 configurations section and it will automatically be reflected on your website.

For inline widgets, you need to specify the location on your site where the widget should be rendered.

By default, the social9 inline widgets are rendered under the element with class name s9-widget-wrapper although you can change the name in the console. This can be done by changing the Parent Container Selector field under the Rules section of the widget editor.


Paste the following snippet in your site where the inline widget should render.

For id selectors

ID Selector

<div id="s9-widget-wrapper-id"></div>

For class selectors

Class Selector

<div class="s9-widget-wrapper-class"></div>