4) Embed your code
4) Embed your code
Note: This module is for those who want to embed the calendar to an existing website like a portfolio site or personal blog.
If you're starting from scratch and putting the calendar on a new domain skip to the alternate module 4 here for directions on creating a simple 2 page website.
To start this module off I'm making a few assumptions:
- You can create pages on your site.
- You've already created those 2 placeholder pages I talked about in module 1.
- Your website building software allows you to embed HTML, or has some sort of easy widget for you to embed HTML on the main section of your pages (not the sidebar).
Now since I don't know which software you're using to run your website, I can't feasibly give detailed instructions for all the variations, tools, and customizations for all the different website builder tools.
Instead, I'll give a birds-eye view of what you want to achieve and leave it to you to determine the 'how' with respect to whichever website software you're using.
In a new tab, go to your website builder and log in.
Navigate to the placeholder page you created in Module 1 called '(City) Event List'. If you haven't made this page yet then just create a new one and title it like the above using your own community. We titled ours like the following:
- villageboom.org/Fairfield-Event-List
Now if you're using a drag-and-drop website builder like Wordpress, Wix, Squarespace, etc. then look for an element to add called one of the following:
- Embed
- Code
- HTML
- Custom
- (something similar)
Drag that element onto your page.
If it doesn't automatically open up a box for you to paste in the calendar embed code then just click on it.
Right click and paste the calendar embed code into the element.
Save it, then save & publish your page.
Open up the live page in a new tab to see how it looks. If all went well you should see just the page title and your LIVE calendar (with no events yet).
Huzzah! Scroll down to Part 2 below.
If you don't see your calendar then something is likely wrong with the code element. See if there's a 'different' custom HTML element you can use in your web builder and try that. You may have to search Google for help docs related to your specific website software and 'embedding custom html element'.
You can also reach out to me for help directly:
- Leon's email: vb@villageboom.org
Part 2 - Adding a Page Note
Eventually you're going to have hundreds of local community members visiting this page every week to see what's happening in town.
That page is valuable real estate to promote your services.
On my event list page I added two short and sweet notes:
"Every community event in one easy place!"
AND...
"Want more customers? Explore help >"
I HIGHLY recommend adding a similar text element above your calendar too. Heck, you can even just copy me.
Then for that link you can send people to any of your service pages, an opt-in, a report, your portfolio, or even just a contact page for a free consultation.
Experiment to see what works for you.
When your event list page looks good and live on the web, double check it on your phone to ensure it looks okay on mobile. A majority of your hundreds of weekly visitors will be from mobile so you want it to look good on phones.
Once you 're satisfied with your event page start the next step.