Heymarket Website Widget

Overview

The Heymarket Web Widget allows people to send messages from websites to your Heymarket inbox(es). It’s perfect to include on your company website, a pricing page, or customer support site. People can enter questions in the widget and a phone number to receive your reply. The Heymarket widget has been designed to be easily integrated on most websites including Squarespace, Wordpress, Weebly, and Google Tag Manager.

How it Works

The widget loads a small, floating message button on your site.  This button will stay fixed on the bottom right corner of the browser window, even as a user scrolls.

HM-widget-button.png

When it’s clicked, the floating message button will display a message dialog box. The user can enter their question and receive your reply as a normal text message on their phone.

HM-widget-dialog.png

Customizing the Widget and Creating the Code Snippet

The messaging dialog box is customizable and shows your company name, a welcome message, fields for a user to enter a phone number and message, and legal compliance text. You can also change the colors in the dialog box to match your website.

To add the Heymarket widget to your website, you must be able to add a custom code snippet of HTML/Javascript code into every web page that you want the widget to appear.  Many web hosting services provide an easy way to do this.  Read below for specific steps for adding the widget to Squarespace, Wordpress, Weebly, and Google Tag Manager.

Here is how you can customize the widget and create the custom code snippet:

  1. As an administrator, sign in Heymarket Web and go to the Manage Integrations page.
  2. Next to ‘Website Widget’, click on the ‘Setup’ button.
  3. Select which Heymarket inbox that widget messages will appear in.
  4. You can now configure the look and feel of the widget: your company name, the welcome message, legal compliance text, and colors.
  5. Now enter website(s) where this widget will appear.
  6. Click the ‘Get Widget Code’ button. You will see a code snipped for the widget you just customized. Select the code snipped and copy it.
  7. The recommended placement of the code snippet is just prior to the closing body tag (</body>).  This ensures that the widget will not impact the performance of your website. If the website uses any theming template, placing the widget code snippet in the theme footer is a quick way to implement the widget on every page on your site in which the footer is shown.

Setup for Squarespace Websites

To insert the widget snippet on a Squarespace site, you must be subscribed to at least the Business level package that allows inserting custom HTML and Javascript.  The snippet can be inserted into every page in the Squarespace site with just a few quick steps:

  1. Sign in your Squarespace account and go to the site Settings.
  2. Select the Advanced menu option under Website.
  3. Select the Code Injection menu option.
  4. Paste your widget code snippet directly into the Footer box. Save your site and you are done!

Squarespace-Footer-Code.png

Visit your site and send a quick message from the widget to test it.

Setup for Wordpress Blogs and Websites

The Heymarket widget can also be used as a Wordpress plugin for your blog or site. Instead of copying the code snippet, click on ‘Download as Wordpress Plugin’. Simply download, install, and activate the Heymarket Widget plugin on any page of your Wordpress site.

HM-widget-wordpress.png

Setup for Weebly Websites

The Heymarket widget can also appear on Weebly sites with these simple steps:

  1. Open your Weebly site in editing mode and click on Settings in the top menu bar.
  2. Click the SEO menu option on the left.
  3. Paste the Heymarket widget code snippet into the Footer Code box.
  4. Click the Save button in the bottom right, then the Publish button in the top right.

Weebly-SEO-Footer-Code.png

Your Heymarket widget is now active on your Weebly site and people can send you text messages from there!

Setup for Google Tag Manager

Google Tag Manager provides a simple way to manage custom snippets of code on your website. If your site has Google Tag Manager setup, you can add the Heymarket widget in just a few steps:

  1. Sign in to Google Tag Manager and click on ‘New Tag’.GTM-1.png
  2. Give the new tag a name (e.g., Heymarket Widget) and click inside the Tag Configuration box to select a tag type.
  3. Select the Custom HTML tag type.GTM-2b.png
  4. Paste the widget snippet code inside the HTML box.
  5. Click inside the Triggering box to select a trigger for the tag.GTM-4.png
  6. Select All Pages. Save and deploy your changes.GTM-5.png

The Heymarket widget should now be active on your site!

 

 

 

 

 

 

 

 

Have more questions? Submit a request