4-alt) Embed your code
4-alt) Embed your code
Only use this guide if you don't already have a website to embed your calendar, or want to embed it on its own domain name.
In this module you'll be creating a 1-page website to display your calendar publicly on the web using the (.com) domain name you purchased earlier. To make this happen you'll have to purchase a landing page service.
In the guide below I use one called 'Carrd.co' because it's only $19 per year. It's by far the cheapest option for landing pages and super simple to use. Before I made my personal site here on villageboom I was using Carrd.co to house my local event list site.
Best of all, they allow you to copy my event list 'template' so you don't have to bother with design. Just swap out text with your own and you're good to go!
Let's get started!
Step 1
Go to Carrd.co and when the popup appears saying 'Pro Plan Required' hit the green 'learn more' button.
It'll take you to a signup page, scroll down and choose Pro Standard (middle option for $19 a year). You need the pro standard level in order to embed the calendar.
Follow their signup process and be sure to 'verify' your account via the email link they send you before continuing.
After clicking the email confirmation link, log back in and you'll be taken to your Carrd.co Dashboard.
In the upper right corner hit the green 'New Site' button.
Next to the 'blank canvas' option should be a custom template that says 'My Town Event List' in the screenshot. You can hit the demo option if you want to see what you'll be making in a new tab, but Select that custom template to start editing.
You should now be in the 'editor mode' looking at the pre-built template I shared with you. Most of the text should appear normal but the calendar does not display in editor mode (it's just a gray box in editor), that's normal.
Now let's make some edits!
Step 2
Click on 'My Town Event List' so the left-hand editor appears (1), edit the text to reflect your community/town name (2), (for example: Highland Event List), then hit Done at the bottom (3).
Next click the 'more customers' text so the editor appears again (1).
Edit ONLY the url between the parentheses as shown underlined (2).
Currently it's set to the google.com, but here's where you change it to your portfolio site, LinkedIn page, or any other link where local folks can learn how to work with you.
Note: you must keep both parentheses for the link to work on your page, only edit the URL between the parentheses.
Hit 'Done' (3).
Step 3
Here you'll be pasting the embed code from your Google Calendar that you copied in Module 3 (customize & copy calendar link). If you just completed that module a few minutes ago the calendar code is likely still copied to your clipboard and all you have to do is 'paste it'.
Test if you still have it copied to your clipboard now by opening a new tab in your browser, then right-click in the URL bar and choose 'paste' (don't hit enter).
- If the text in that URL ends with '</iframe...>' you're good. Close that tab and keep moving on below.
- If that pasted text is anything else, open module 3 in a new tab and follow the steps to copy your calendar embed code again.
When your event calendar 'embed code' is copied, continue.
Back in the Carrd editor tab...
Click the grey box for G-Cal (1).
On the left-hand menu scroll down to the 'Code' section. You'll see my calendar embed code here as a placeholder. Delete all of it.
Right-click in that same box and choose 'Paste' (2).
Your G-Cal embed code should appear here and look very similar.
Inside that same code box, near the bottom, look for this small bit of code (3):
- width="800"
- change it to...
- width="100%"
Keep the quotations, but just change "800" to "100%". Include the percent sign.
Hit 'Done' (4).
Step 4
All we're doing here is adjusting how the page looks on mobile.
Tap the phone icon in upper right (1) to see how it looks on mobile. This is important because 75% of local folks will visit on phones. You wanna make sure it looks good for them.
When on mobile view, click your title text (2), tap the paintbrush on left (3), and adjust the font size (4). Move the size slider around until you think the title text for your mobile page looks good.
Hit 'Done'.
Step 5
Hit the save icon in upper right corner (1).
In the left-hand menu, change the page title to reflect your community (this will be crawled by google eventually). I just named mine 'Fairfield Event List'.
Add a description using your town/community name (3).
Scroll down (4).
Now you'll see 'Actions'.
Choose 'Publish to a custom domain' (1).
A box will appear asking you to type in the domain.ext this page should exist at.
DO NOT, whatsoever, type your main domain name you purchased recently.
Instead, put something before it like "go." (2), for example:
- go.mydomain.com
- go.richlandeventlist.com
- go.birdtowneventlist.com
- go.uptownevents.com
Type that in and some records appear below. DO NOT PUBLISH YET.
Take note of the two A-records/targets shown (3).
In new tab (4), open google domains & login.
Next to your domain name on right side hit 'manage', then on left side menu hit DNS, then on right side under custom records hit 'manage custom records'.
You should see this page now:
Scroll down and hit 'create new record' (1).
In the first box type 'go' (2).
In dropdown choose 'A' (3).
Under last box (4) tap '+Add more to this record' so two boxes appear.
In those two boxes (5) you'll want to copy & paste the 2 'targets' given by Carrd from your other tab.
Once you've copied/pasted the two targets from Carrd into your DNS records on Google Domains, hit 'Save' (6).
Almost done!
Go back to your Carrd tab & hit green 'Publish Changes' button at bottom.
You'll see a note saying it may take up to an hour to see your changes. This is just for the first time publishing to a custom domain because it takes a little time for Google Domains and Carrd to 'talk' with each other.
Dismiss the popup.
(once they are 'connected' in an hour or so, any future changes you make to your Carrd page get reflected on your live page almost instantly)
If you want, set a timer for 1 hour to check if your event page is live yet.
Back in your Carrd page editor, look in far upper-right corner for the sandwich style menu and expand it, then click 'Dashboard'. Leave this tab open.
In a few lessons I'll walk you through creating another Carrd page with your newsletter signup form so it appears on your main .com URL. In the meantime start the next lesson.