All articles

Support us from £3 a month and fund new journalism on topics that matter to you

Become a Patron

Download your 'As featured on pebble magazine' website sticker!

Congratulations, your awesome product has been covered in pebble - and now you want to shout about it? Well, who wouldn’t!

Our cute “As Seen In pebble magazine” website sticker is all yours to add to your site. Wear it loud and proud. 

The pebble sticker sits in the bottom right of your website on a desktop or mobile, and visitors can choose to hide the button for the duration of their visit by clicking the ‘X’ button.

Below are all the instructions you’ll need for uploading the widget code, depending on what platform your website is built on. Click to select the instructions you need...


Wordpress

We've made a plugin for Wordpress users, so your install process is very simple...

1. Click here to download the plugin zip, and save it somewhere easy to access

2. Log in to your Wordpress admin dashboard (the user you login as must have authority to install plugins)

3. Click the ‘Plugins’ option on the dashboard's left menu bar

4. Click ‘Add New’ which appears underneath Plugins

5. Then, in the right hand panel of the screen, click ‘Upload plugin’

6. Click the ‘Choose file’ button and navigate to the zip you downloaded in Step 1 and select the file

7. Click the 'Install Now' button

8. Once installation is complete, click ‘Activate plugin’

9. If successful, the dashboard's left menu bar should now feature a 'Pebble Button' option somewhere towards the bottom. Click it.

10. In the text box, change the word 'undefined' to your brand name making sure to keep the 'quote marks' intact, i.e...

Change this...

{'source':'undefined','medium':'widget','campaign':'widget'}

To this...

{'source':'YOUR BRAND NAME','medium':'widget','campaign':'widget'}

11. Click Save Changes


Shopify

If you’re running a store built on Shopify, you’ll need to edit your store theme to add the widget code as follows...

1. Log in to your store, and select “Online Store” from the left hand menu. It should open a sub-menu, with “Themes” selected.

2. Your live theme is shown at the top on the right of the screen. In that box, click the “Actions” button, and select “Edit code” from the menu.

3. In the list of editable files, you should see a “theme.liquid” at the top, in the Layout folder…

shopify-instructions-v2.jpg#asset:15282


4. Click the “theme.liquid” file to open in the editor on the right. Find the </head> tag, shown highlighted in red above, someway down the code. Then copy and paste the following line code immediately before the </head> tag, in the position shown highlighted in green above…

<script> var pebbleshare_params = {'source':'YOUR BRAND NAME','medium':'widget','campaign':'widget'} ;</script><script async src="https://pebblemag.com/uploads/resources/pebbleshare.min.js"></script>

5. Change the words YOUR BRAND NAME to the name of your brand or store. Make sure to keep the ‘quote marks’ around your name.

6. Click the blue “Save” button at the top right of the edit window.

7. Your installation is now complete.


Squarespace

Business and commerce users of Squarespace can easily add the widget code to every page on their site, or just selected pages.

To add to all pages:

1. Log in to the configuration panel of your store

2. On the left hand menu, select “Settings”

3. Select “Advanced” from the next menu.

4. Select “Code Injection” from the next menu. (Note, this feature is unavailable to Squarespace Personal users)

5. Cut and paste the following code into the box labelled “Header”

<script> var pebbleshare_params = {'source':'YOUR BRAND NAME','medium':'widget','campaign':'widget'} ;</script><script async src="https://pebblemag.com/uploads/resources/pebbleshare.min.js"></script>

6. Change the words YOUR BRAND NAME to the name of your brand or store. Make sure to keep the ‘quote marks’ around your name.

7. Click “Save” at the top left of the window.


To add to individual pages:

1. Log in to the configuration panel of your store

2. On the left hand menu, select “Pages”

3. Find the page on your pages list that you wish to add the widget to, and click the cog icon that appears when you hover on the page name.

4. Select “Advanced” from the menu on the popup box that appears

5. Select “Page Header Code Injection” from the next menu. (Note, this feature is unavailable to Squarespace Personal users)

6. Cut and paste the following code into the text box

<script> var pebbleshare_params = {'source':'YOUR BRAND NAME','medium':'widget','campaign':'widget'} ;</script><script async src="https://pebblemag.com/uploads/resources/pebbleshare.min.js"></script>

7. Change the words YOUR BRAND NAME to the name of your brand or store. Make sure to keep the ‘quote marks’ around your name.

8. Click “Save” at the top left of the popup window.


Wix 

1. Log in and go to Settings in your site's dashboard.

2. Click the Tracking & Analytics tab under Advanced Settings.

3. Click + New Tool and select Custom from the dropdown. 

4. Cut and paste the following code…

<script> var pebbleshare_params = {'source':'YOUR BRAND NAME','medium':'widget','campaign':'widget'} ;</script><script async src="https://pebblemag.com/uploads/resources/pebbleshare.min.js"></script>

5. Change the words YOUR BRAND NAME to the name of your brand or store. Make sure to keep the ‘quote marks’ around your name.

6. Select the relevant domain (this option only appears if you have more than one Wix site)

7. Enter a name for your custom code (i.e. Pebble Widget)

8. Add Code to Pages: Select which pages to add your code to….

  • All Pages: Click the dropdown to select the “Load code once” option
  • Choose specific pages: Begin typing the name of the relevant pages and then click the checkbox next to the relevant page.

9. Place Code in: Select the “head” option 

10. Click Apply.


Other websites

If your website platform is not listed above, you need to add the following code manually to your website pages. You may need assistance from your website developer. 

The following code should be added in the <head> area of the HTML page template, or alternatively just before the </body> tag closes...

<script> var pebbleshare_params = {'source':'YOUR BRAND NAME','medium':'widget','campaign':'widget'} ;</script><script async src="https://pebblemag.com/uploads/resources/pebbleshare.min.js"></script>

Change the words YOUR BRAND NAME to the name of your brand or store. Make sure to keep the ‘quote marks’ around your name.


If you experience any problems installing your widget code, please contact alex@makermet.com

Thank you,

Support us from £3 a month and fund new journalism on topics that matter to you

Become a Patron