Skip to main content
All CollectionsFor Event Creators + Venues
Custom Calendar and Widgets: Embedding Your Viewcy Events in Your Website
Custom Calendar and Widgets: Embedding Your Viewcy Events in Your Website
Turjo Khan avatar
Written by Turjo Khan
Updated over a month ago

Welcome to the guide on creating custom event listings and calendars using Viewcy's Embed Project! This free tool allows you to create a customized event listing page for your Viewcy organization in just 60 seconds. Tailor the look and feel to match your brand and seamlessly integrate your events into your website.

Sections Covered in This Article:

Overview

The Viewcy Embed Project enables you to:

  • Display your events directly on your website.

  • Customize the appearance to match your branding.

  • Choose between a list view or a calendar view of your events.

  • Enhance user engagement by providing real-time event updates.

How to Create Your Custom Event Listing Page

Follow these simple steps to generate and embed your custom event listing or calendar page.

Access the Viewcy Embed Project Website

Enter Your Viewcy Organization Username

  1. Locate Your Username:

    • Your Viewcy organization username is the unique identifier used in your Viewcy profile URL.

    • Example: If your Viewcy URL is https://viewcy.com/o/yourorganization, then your username is yourorganization.

  2. Enter the Username:

    • In the field labeled "Your Viewcy organization username", enter your username.

    • Note: Do not include the @ symbol.

Customize the Appearance

You can adjust the colors to match your website's theme by entering hex color codes.

Background Color

  • Field: Background color (hex code)

  • Default: ffffff (white)

  • Instructions: Enter the hex code for the background color you desire.

    • Need help? Click on "Need help? Go here." for guidance on selecting hex codes.

Text Color

  • Field: Text color (hex code)

  • Default: 000000 (black)

  • Instructions: Enter the hex code for the text color of your event listings.

Button Color

  • Field: Button color (hex code)

  • Default: D60B52

  • Instructions: Choose a dark color suitable for white text on buttons. Enter the hex code accordingly.

Generate Your Embed Page

  • Generate List Page: Creates a vertical list of your events.

  • Generate Calendar Page: Displays your events in a calendar format.

  • Generate the Code:

    • Click the corresponding button to generate the embed code.

Embedding the Generated Link on Your Website

Since the Viewcy Embed Project provides a link, you need to embed it into your website using an iframe.

Using an Iframe

Embedding your events via an iframe is straightforward and allows for seamless integration into your website.

Sample Embed Code

Here is a sample code snippet you can use:

htmlCopy code<style> /* Adjust the height settings below to your preference */ iframe { width: 100%; height: 1000px; } @media (max-width: 599px) { iframe { width: 95%; height: 2000px; } } </style> <!-- Replace "YOUR_VIEWCY_EMBED_LINK" with your generated link --> <iframe src="YOUR_VIEWCY_EMBED_LINK" frameborder="0"></iframe>

Instructions:

  1. Copy the Entire Code Above:

    • Ensure you select and copy all lines, including the <style> and <iframe> tags.

  2. Replace the Placeholder Link:

    • Find the line that says src="YOUR_VIEWCY_EMBED_LINK" in the <iframe> tag.

    • Replace "YOUR_VIEWCY_EMBED_LINK" with your actual Viewcy embed link generated earlier.

    Example:

    htmlCopy code<iframe src="https://www.viewcyembed.com/yourorganization?bg=ffffff&text=000000&btn=D60B52" frameborder="0"></iframe>

  3. Insert into Your Website:

    • Paste the modified code into the HTML of the page where you want the events to appear.

    • Ensure you have the necessary permissions to edit your website's HTML.

  4. Adjust the Height Settings (Optional):

    • You can modify the height values in the <style> section to suit your website design.

    • Adjust both the height settings inside and outside the media query to maintain consistency across different screen sizes.

  5. Save and View:

    • Save the changes to your website.

    • Refresh the page to see your embedded event listings.

Advanced Customizations

Looking for more options? If you require advanced customization, you can request access to the Viewcy API.

  • Custom Fonts: Match the typography of your website.

  • Separate Sections for Categories or Tags: Organize events by categories or tags for better user navigation.

  • Custom Header with Your Logo: Brand your event listings with your organization's logo.

  • Contact Us:

  • Developer Resources:

    • We can provide API access and documentation for deeper integrations.

Need Help with Hex Codes?

If you're unfamiliar with hex color codes:

  • Click on "Need help? Go here." next to the Background color field for a helpful guide.

  • Use Online Tools:

  • Example Hex Codes:

    • Black: 000000

    • White: ffffff

    • Red: ff0000

    • Blue: 0000ff

    • Green: 00ff00

Frequently Asked Questions

Can I embed the calendar on multiple pages?

Yes, you can use the generated embed code on any number of pages or websites.

Will the embedded calendar update automatically?

Absolutely! Any updates you make to your events on Viewcy will automatically appear on your embedded calendar or list.

Is there a cost associated with using the Viewcy Embed Project?

No, the basic embed tool is free to use. For advanced customizations, please contact us to discuss any associated costs.

Did this answer your question?