Add Fresh Desk Widget For Sandbag Stores

by ONELIVE Webmaster January 30, 2017

How to Add the Fresh Desk Widget on Sandbag Stores.

This technique was first used on the Bastille stores http://store.bastillebastille.com/

fresh-widget-button.liquid

Create a snipped named fresh-widget-button.liquid and add the following code:

<script type="text/javascript" src="http://assets.freshdesk.com/widget/freshwidget.js"></script>
<script type="text/javascript">
                FreshWidget.init("", {"queryString": "&widgetType=popup&formTitle=Contact+us&submitTitle=Submit&submitThanks=Thanks%2C+We'll+be+back+to+you+shortly.&searchArea=no", "utf8": "✓", "widgetType": "popup", "buttonType": "text", "buttonText": "Contact us", "buttonColor": "white", "buttonBg": "#13C300", "alignment": "3", "offset": "1200px", "submitThanks": "Thanks, We'll be back to you shortly.", "formHeight": "600px", "url": "https://sandbagltd.freshdesk.com"} );

</script>

fresh-widget-embed.liquid

<script type="text/javascript" src="http://assets.freshdesk.com/widget/freshwidget.js"></script>
<script type="text/javascript">
    FreshWidget.init("", {"queryString": "&widgetType=popup", "utf8": "✓", "widgetType": "popup", "buttonType": "text", "buttonText": "Contact us", "buttonColor": "white", "buttonBg": "#FF0000", "alignment": "2", "offset": "235px", "formHeight": "500px", "url": "https://sandbagltd.freshdesk.com"} );
</script>

settings_schema.json

Open settings_schema.json and add the following code:

  {
    "name": "Fresh Desk",
    "settings": [
      {
        "type": "checkbox",
        "id": "fresh-desk-embed",
        "label": "Fresh Desk Embedded",
        "default": true,
        "info": "Check this box if you want the fresh desk embed to be enabled"
      },
      {
        "type": "checkbox",
        "id": "fresh-desk-button",
        "label": "Fresh Desk Open Close Button Bottom Right",
        "default": true,
        "info": "Check this box if you want the fresh desk bottom right button enabled"
      }
    ]
  },

Include the Widget Through Theme.liquid

Open theme.liquid and add the following code before the tag.

  {% if settings.fresh-desk-button %}
    {% include 'fresh-widget-button' %}
  {% endif %}

Add this code inside the footer container just before the closing .

{% if settings.fresh-desk-embed %}
  <div class="grid--full large--display-table">
    <div class="grid__item large--full large--display-table-cell"> 
        {% include 'fresh-widget-embed' %}
     </div>
  </div>        
{% endif %}

Considerations

If the javascript is throwing errors it is most likely due to mixed security. If this happens you will see a security error under Console and the store's URL will be https://

To fix this issue simply open the fresh-widget-embed.liquid and the fresh-widget-button.liquid code and change the embed freshdesk link from http to https.

https://assets.freshdesk.com/widget/freshwidget.js