Video Tutorials

This is a test post for using "iorad" to create video how to tutorials for the various technologies we use to achieve the digital tasks we've setup for Zero Emissions Noosa.

iorad is a free service as long as you make the tutorials public.

Following is a test of an embedded video tutorial.   The content is nothing special - it just shows how to open squarespace & make some changes to a blog post.

Please use the comment section below to tell us what you think....

Step 1: The first step is to open Build a Website – Website Builder – Squarespace and with your mouse, hover GA

Step 1 image

Step 2: Click Sites

Step 2 image

Step 3: Click highlight

Step 3 image

Step 4: Click Pages

Step 4 image

Step 5: Click Roadmap Project Blog

Step 5 image

Step 6: Click Large Consumers

Step 6 image

Step 7: Click Edit

Step 7 image

Step 8: Click Edit

Step 8 image

Step 9: Click "600px"

Step 9 image

Step 10: Type **** in highlight

Step 10 image

Step 11: Click Apply

Step 11 image

Step 12: Click Edit

Step 12 image

Step 13: Click "800px"

Step 13 image

Step 14: Type **** in highlight

Step 14 image

Step 15: Click Apply

Step 15 image

Step 16: Click Edit

Step 16 image

Step 17: Click "200px"

Step 17 image

Step 18: Type **** in highlight

Step 18 image

Step 19: Click Apply

Step 19 image

Step 20: Click Save

Step 20 image

Step 21: Click Campaigns

Step 21 image

Step 22: Click Academic ZEN

Step 22 image

Step 23: Click highlight

Step 23 image

Step 24: That's it. You're done.

Step 24 image

Print Friendly and PDF

Notes on displaying Facebook feed in Squarespace

For those that don’t use Facebook, we can embed the Zero Emissions Noosa Facebook feed on Squarespace pages.

Currently we do that on the News page - https://www.repowernoosa.com/zen-news

And there’s also a (currently) unlinked page at https://www.repowernoosa.com/fb-feed which displays the feed in a larger format, and can be linked to from an email.

Some implementation notes follow:

Refer to https://developers.facebook.com/docs/plugins/page-plugin for how do show this Facebook feed.  

Requires a Facebook developer account, and then creation of a Facebook app (which can be a website) - https://developers.facebook.com/apps/

Note that the page width for the /fb-feed page has been set to max = 500, and height = 2000.  Downside is that need to use landscape mode for mobile

Note FB uses w=340 & h=500 by default when generated code snippet

Note that Facebook requires a link to a privacy page statement before the app(website) can be linked to FB account

 

 

 

 

 

Print Friendly and PDF

How to add a Repower Noosa event

This post explains how to add an event for Repower Noosa.

These events will display on the What's On page.

Step 1

Login to your Squarespace account
Navigate to Pages, then scroll down to Event List

Screen Shot 2018-06-25 at 5.05.52 pm.png
Screen Shot 2018-06-25 at 5.06.40 pm.png
Screen Shot 2018-06-25 at 5.07.12 pm.png

Step 2

Screen Shot 2018-06-25 at 5.08.01 pm.png

Click the + to add a new event

Content tab - fill in event title, start & end date / times, and content

Options tab - write a short Excerpt, and mark as Featured Event if desired.  Featured events display at the top of the What's On page

Location tab - you can fill in the full address for the venue

Step 3

Click SAVE & PUBLISH and your event will be live on www.repowernoosa.com


Linking to Eventbrite and Facebook events

To do this requires some knowledge of using Eventbrite and permissions to connect to our Facebook page.  Probably best to consult with Geoff before doing this....

In cases where we run a large event that we want people to register for and maybe also pay for, it may be worth using Eventbrite and Facebook.

In cases where we are just promoting an event to people already on our mailing list, creating Eventbrite & Facebook events probably isn't needed.

The advantage of using Eventbrite is that we capture new people's contact details, the event can be more widely shared, and Eventbrite does email reminders for those who have registered.  Eventbrite events can also be shared to our Facebook page, and people can register from Facebook.

Steps (abbreviated)

  1. Add event in Squarespace, as above
  2. Create the same event in Eventbrite
  3. Link the Eventbrite event to our Facebook page
  4. Add a button to the Squarespace event content.  Label the button "Register" and use the Eventbrite link they provide

Notes

  1. Don't create event in Facebook.  From Eventbrite there is a facility to create the event in Facebook.
  2. If a user clicks on event in Facebook, the registration is done in Eventbrite
  3. If a user clicks on the Register button on the Squarespace event, registration is done in Eventbrite
  4. Note that Facebook will only report Goings which were done from the Facebook event
  5. Facebook also allows a user to just click Going or Interested, and not go through the Register process
Print Friendly and PDF

How to include a button to add event to calendar in Mailchimp campaign

This post assumes a reasonable knowledge of creating events in Squarespace, and creating campaigns in Mailchimp.

STEP 1
Create event via Squarespace - see How to create an event

Screen Shot 2018-06-25 at 5.51.31 pm.png

STEP 2
Once the event has been created in Squarespace
Go to the event on the live RepowerNoosa.com site

Copy the URL for each of the Calendar links - Google & ICS, and save them in a TEXT file

 

Screen Shot 2018-06-25 at 5.58.49 pm.png

STEP 3
In Mailchimp, make a copy of a campaign that has the RSVP and Save to Calendar buttons, as per the example image.

 

 

 

 

STEP 4
In your copied Mailchimp campaign
Button - add to Google Calendar - associate Google link above
Button - add to Calendar generic - associate ICS link above

Screen Shot 2018-06-25 at 5.56.29 pm.png

NOTES
Button with ICS link seems to work fine on iOS
Button with Google Cal seems to work fine on desktop if you use Google Calendar, otherwise it downloads ICS file - and when you open file it opens your default Calendar & it should then save fine

Print Friendly and PDF

How to make Squarespace pages print friendly

Squarespace pages are not print friendly as per this Squarespace article.

They recommend

  • take a screenshot & print it - not too useful
  • create PDFs of the content - again not too useful
  • use a 3rd party tool - they refer to PrintFriendly
  • add custom code

We'll try PrintFriendly.  Here are some articles explaining how to.  The first 2 use PrintFriendly, and the 3rd uses site-wide code injection.

  1. https://answers.squarespace.com/questions/86410/need-a-printer-friendly-button-that-print-from-a-blog-post-not-the-entire-blog-page.html
  2. https://www.squaredesignguild.com/blog/print-recipe-squarespace
  3. https://answers.squarespace.com/questions/10685/how-to-make-website-printer-friendly.html

Try using method 1

Note that the way the www.repowernoosa.com website is constructed, the majority of the detailed content is managed using blog posts.

Follow the instructions for each set of blogs.  This will add a "Print Friendly" button at the bottom of each post in the blog, as per the image below:

Screen Shot 2018-06-13 at 2.45.48 pm.png

Make sure that the same code is injected for each of the blogs.

Screen Shot 2018-06-13 at 3.10.00 pm.png

As at 13 June 2018, the blogs as per the diagram have been set up for Print Friendly.

Other enhancements can be made to the button code, eg include repowernoosa logo, etc.  Refer to the Print Friendly button page.

Note that the free version of Print Friendly will show advertisements.

Problems:

Best to show images "inline" as a separate block, and not mixed in with text, as Print Friendly will skip printing the image & text.

And even after changing a page layout to take out image + text on in a layout, text & image can be removed from Print Friendly

A similar approach could be used for non-blog pages

Method 2

Used the code injection method as suggested - just to remove header & footer.

Note article is not quite correct - you go to Settings | Advanced |Code Injection    and then insert the code snippet into the Header section.

Seems to work better with graphics & text alignment.

Problem is that some text is garbled, eg lines marked as Heading 3.  Also button text, and side menu text.

Maybe this can be fixed with addition style rending for printing.....

Print Friendly and PDF

How to capture RSVP responses in Mailchimp using Squarespace

This post gives a full explanation of how this feature has been implemented.

If you just want to use this feature in a Mailchimp campaign, all you need to do is make a copy of a Mailchimp campaign that already uses this feature (and probably the save to Calendar feature as well)

Once the user clicks on the Yes or Sorry buttons, they are redirected to a Squarespace page where they are asked to confirm

Screen Shot 2018-06-25 at 5.58.49 pm.png
Screen Shot 2018-06-25 at 6.21.46 pm.png

This will result in an email being sent to info@repowernoosa.com, and an entry being created in a shared Google Sheet - RSVP

Screen Shot 2018-06-25 at 6.24.53 pm.png

Details about how this is implemented are described below.

THE PROBLEM

We use Mailchimp to let people know about meetups.
It's difficult to know who's going to come.  Often we've then sent out Mailchimp/email, then had to followup with a text message asking for a reply which may or may not come, so then revert to phone call, which is all too time consuming.
Need a simple way for folks to respond with Yes or No if they're coming to a meeting.
Also need a reliable way to know if someone has read or opened their email about the event.

A SOLUTION

Add a "I'm coming" and "Sorry can't come" button to the Mailchimp campaign.
The button takes them to a simple Squarespace RSVP page with a Form where they confirm their attendance.
Squarespace records their response & can generate an email, and/or save the response in a Google Sheet.

 What you see in Mailchimp Email

What you see in Mailchimp Email

 Result of clicking on Yes I'm Coming.  Note fields passed in URL

Result of clicking on Yes I'm Coming.  Note fields passed in URL

 Confirmation email received by administrator, eg info@repowernoosa.com

Confirmation email received by administrator, eg info@repowernoosa.com

 Response can also be recorded in a Google sheet (GSuite)

Response can also be recorded in a Google sheet (GSuite)

 A Form with only hidden fields is used on the repowernoosa.com/RSVP page.  On button click the fields passed in the URL are stored - options are email, GSuite google sheet

A Form with only hidden fields is used on the repowernoosa.com/RSVP page.  On button click the fields passed in the URL are stored - options are email, GSuite google sheet

 The Mailchimp "Yes I'm Coming" button links to the Squarespace page.  Use Mailchimp merge codes

The Mailchimp "Yes I'm Coming" button links to the Squarespace page.  Use Mailchimp merge codes

Here is the Web address (URL) to include for the Yes I'm coming Button

https://www.repowernoosa.com/rsvp/?SQF_CAMPAIGN=*|MC:SUBJECT|*&SQF_EMAIL=*|EMAIL|*&SQF_FNAME=*|FNAME|*&SQF_LNAME=*|LNAME|*&SQF_REPLY=Yes

 

And for the No Button

https://www.repowernoosa.com/rsvp-no/?SQF_CAMPAIGN=*|MC:SUBJECT|*&SQF_EMAIL=*|EMAIL|*&SQF_FNAME=*|FNAME|*&SQF_LNAME=*|LNAME|*&SQF_REPLY=No

 

Mailchimp merge codes can be found here.

Probably only need to use

*|MC:SUBJECT|*
*|EMAIL|*
*|FNAME|*
*|LNAME|*

for email and name of the Mailchimp recipient, and the campaign's subject line.  Squarespace will add the date & time.

Folks creating Mailchimp campaigns would just need to copy a simple sample campaign that includes the RSVP buttons, and so wouldn't have to be concerned about the URL encoding.

Read about Squarespace hidden fields in forms here.

See other post about how to create events and be able to save them to your calendar from the MailChimp email.

This is cheap and cheerful and should fulfil the purpose of recording RSVPs

That's it!

 

Print Friendly and PDF