HubSpot

Code Gallery

Template - HubSpot Code Gallery Entry Repo Template

Use this repo structure as a template for your HubSpot Code Gallery submissions. Please clone this repo and build out your entry.

Your Documentation Please spend the time to create good documentation and step-by-step instructions in your readme file (the community appreciates it). If you’re looking for a good example, please review AJ LaPorte’s “Speaker Lineup Cards” on GitHub.

GIF Walk Throughs It’s recommended to include GIF recordings to show specific setup steps. You can use RecordIt chrome extension to record these quickly.

Ready to Submit it? When you're ready to submit, visit the contribute to the Code Gallery page to submit your entry.

Once submitted, your entry will be reviewed before publishing To keep quality high and protect against any malicious activity, we review all entries before publishing them live in the Code Gallery. We try to do this as fast as possible, however, this is a voulenteer effor - please allow up to 7-10 business days. :) Thanks for your patience.

Code

The code gallery takes two types of submissions currently:

Modules (recommended) - fully functional v2 modules
Snippets - snippets of code that are intended to be used in coded templates such as blog listing snippets, HubDB dynamic page templates, and other techniques.

For modules, the structure of the files must match the structure used when working with a module via FTP. This is necessary so that it is easy for a developer that is browsing the code gallery to try out one of the entries. See Sample.module for an example.

Notes:

Remove module_id and portal_id from meta.json if copying from FTP
Consider using placeholder images instead of images from the HubSpot file manager

Files in each category will be listed in alphabetical order on the code gallery website.

Screenshots

Add screenshots under the screenshots folder. .jpeg, .jpg, .png and .gif files will be picked up automatically regardless of filename. Screenshots will be listed in alphabetical order on the code gallery website.

Metadata

Add the title, description, categories, demo url, video url and HubSpot marketplace url by replacing the contents of the hubspotcodegallery.yaml. Categories are added as a comma separated list and each item in the list must match an existing category on the Code Gallery website.

Code Gallery Categories

Currently the HubSpot Code Gallery accepts entries that fit within one or more of these categories…

Structure

Menus and navigation
Grids and content blocks
Tabs and accordion
Pagination
Loops
Lists
Multilingual 
Content
Header / Heros
Footer
Charts and graphs
Blog
Maps
Pricing tables
Testimonials
Calendar and events
Team member 
Components
Ratings and reviews
Buttons
Forms
Progress and loading
Call to actions and lead capture
Social
Animation, scrolling and hover states
HubDB
Video
Modals

Frequently Asked Questions

Are new Code Gallery entries reviewed before being pubslished? Yes. To keep quality high and protect against any malicious activity, we review all entries before publishing them in the Code Gallery. We try to do this as fast as possible, however, this is a voulenteer effor - please allow up to 7-10 business days. :) Thanks for your patience.

I’ve never used GitHub before - what’s the best way to learn how to use it? If you’ve never used it before, GitHub is well worth your investment of time to learn how to use and is fairly easy to pick up.

Here are a few resources you can use to learn GitHub:

I’ve updated my GitHub Repo, will it sync with my existing Code Gallery entry? Yes, it should sync. If you do not see your updates sync in 24 hours please let us know.

Can I install a Code Gallery entry directly into my portal? We do not have a one-button install at this point. You will need to either 1) Download the module locally and push to a portal using the HubSpot local development tooling - see this video

How do I delete my Code Gallery entry or account? Please contact us ( luke -at- hubspot -dot- com ) to delete your Code Gallery entries or your account. Currently, there is no way for users to self-delete an entry. We are exploring this for the future.

Can I download a Code Gallery module to my local machine to edit? Can I then push the edited module to my HubSpot Portal? Yes! With the Hubspot Local Development tooling, it is possible. We created a short video on how to do this --> WATCH IT

If I delete the GitHub repo, will it delete the entry from the Code Gallery? If you delete the original GitHub repo, it will not remove it from the Code Gallery. Currently, the only way to remove them is manually by our admins. We’re happy to do it, just contact us ( luke -at- hubspot -dot- com ). :)

If I rename the GitHub repo, will it beak the associated entry in the Code Gallery? Nope. We use your repo ID to organize everything.

If I edit my profile in GitHub, will it sync in the Code Gallery? Maybe. Some profile elements (ex: Profile picture) will sync in the next few hours. Other elements (ex: username) may not sync. If you make an update and it does not sync, please contact us with the update you’d like to make.

What are the different verification levels for entries and how do you earn them? We have three different levels of verification for Code Gallery Entries.

Unverified - All new entries are unverified by default.
Community Approved - The entry has earned 25+ likes from community members, showing that it is valuable to other developers.
HubSpot Approved - A HubSpot employee has reviewed the submission and given their stamp of approval.

Please keep in mind that entries are 100% community submitted and are not built by HubSpot. HubSpot does not actively support the entries in the Code Gallery, even the HubSpot approved entries. If you have questions, we do have amazing developer forums and developer slack where you can ask technical questions.

How does my entry become HubSpot approved? We do not have a formal system or full-time employees for HubSpot approvals. Developers at HubSpot volunteer to review Code Gallery entries in their spare time and is 100% our discretion if we approve an entry.

If your entry is getting a lot of likes from community members, it is much more likely that a HubSpotter will review it for approval. Make sure to build something valuable, code it well, promote it and get likes.

How do HubSpotters evaluate entries? We use the Marketplace requirements, review the code quality, ensure the output of the entry is very easy to use if you’re non-technical, and that it follows our best practices as outlined in our CMS for Developers certification.

How does my entry or my profile become featured on the Code Gallery home page? Entries and contributors with a high number of likes, quality of code, and uniqueness/creativity are often ones selected to be featured. We also look for entries that use brand new HubSpot functionality.

What’s the difference between the Code Gallery and the HubSpot Marketplace? The core difference is each project’s goal and who it is building for. The Code Gallery’s goal is to learn from each other and is geared towards developers. The HubSpot Marketplace’s goal is to make it easy to extend the functionality of HubSpot (and sell your creations) and is built for non-technical folks.

We recommend listing your creations on both! When submitting to the Code Gallery, you can add the link to your marketplace listing.

We do see how they are similar and could envision a world where they are one. But for now, they will live and grow separately.

Have Questions?

If you have questions, please email me at Luke (at) HubSpot.com or slack me @Luke in the HubSpot Developer Community Slack.

HubSpot

Not developing on HubSpot CMS yet?

We'd love to have you a part of our developer community!

There are many reasons why developers love building on HubSpot CMS.
Get started for free with our CMS Developer Discovery Kit.

HubSpot / codegallery

readme