How can we help?

Search our knowledge base or submit a ticket.

How to Create and Embed an Event Widget on Your Website

How to Create and Embed an Event Widget on Your Website

Step-by-Step Guide

Adding an event widget to your website can help promote your event and provide visitors with all the necessary details. Follow these steps to create and embed your event widget:

Step 1: Copy Your Event Link

  • Navigate to Your Event Page:
  • - Go to your event page on Shows
  • - Copy the URL of your event page from the address bar of your browser.
  •  

Step 2: Login to Your Organiser Dashboard

  • Access the Dashboard:
  • - Login to your Shows.NG account.
  • - Navigate to the Organiser Dashboard.
  •  

Step 3: Generate the Embed Code

  • Find the Widget Option:
  • - On your PC, click on the "Widget" option in the top menu.
  • - On mobile or the app, click on the "Widget" option in the right menu.
  •  
  • Paste Your Event Link:
  • - In the Widget Generator, you will see a box to paste your event link.
  • - Paste the event link you copied earlier into this box.
  •  
  • Generate the Embed Code:
  • - Click the "Generate Embed Code" button.
  • - Your embed code will be displayed in a textarea.
  • - Copy the Embed Code:**
  • - Click the "Copy Embed Code" button to copy the code to your clipboard.
  •  

Step 4: Place the Embed Code on Your Website

Open Your Website’s HTML Editor:

  • - Open the HTML editor where you want to place the event widget (this could be in a CMS like WordPress, Joomla, or directly in your HTML files).
  •  
  • Paste the Embed Code:
  • - Paste the copied embed code into the HTML where you want the widget to appear.
  •  
  • Save Your Changes:
  • - Save the changes to your HTML or CMS.
  • - Preview your website to ensure the widget displays correctly.

 

Example of the Embed Code

Here’s an example of what the embed code might look like:

<iframe src="https://www.shows.ng/api/widget_event?id=166" width="600" height="400" frameborder="0" allowfullscreen></iframe>

Responsive Design:

Ensure your website’s design is responsive so that the widget displays correctly on all devices.

  • * Test the Widget: After embedding, test the widget on different devices to ensure it looks good and functions properly.
  •  

By following these steps, you can easily create and embed an event widget on your website, helping to attract more attendees and provide them with essential event information.

Message us on WhatsApp