How to embed the event registration page on a third-party website

  • Updated

All_plans_.png

Registration widgets give you the power to host the entire event signup process right on your website. The Embeddable Javascript Widget will enable an organizer to copy and paste the Javascript snippet and embed the Registration experience and user flow on a third party website.

Attendees can checkout and purchase multiple tickets, send invites, and complete their registration all without ever needing to go to hopin.com

Creating a registration widget

Before creating the widget, you need to enable widget authentication. When widget authentication is disabled, logging into the existing user account isn’t possible and attendees can only checkout as guests. However, if there’s a single public ticket, any user already logged into their account will be taken straight into the event.

When widget authentication is enabled, attendees can log into their account, create a new account, or check out as guests. To enable this, go to the Event Dashboard > Registration > Details > Scroll to the bottom of the page to find Widget Authentication and toggle the button. Hit Save.

Screenshot_2021-10-17_at_15.36.50.png

Now to create the widget,

  • Go to the Event Dashboard > Registrations > Embeddable Widgets.  
  • Click the Create Widget button at the top of the page, which will open up a form for you to complete.

Screenshot_2021-07-05_at_16.20.17.png

  • Give your widget a name
  • Specify the tickets you’d like to include. This is particularly useful when you need to embed the registration page to reflect just some specific tickets on your website. 
  • Check the Enabled box to enable it and click Create Widget. 

Screenshot_2021-07-05_at_16.22.30.png

  • You’ll now see it appear in the list of widgets.

Embedding a registration widget

If you’re ready to embed the widget on your site, click the edit icon for the respective widget. This again will open the form to which you’ll see a few snippets of code at the bottom.

Screenshot_2021-07-05_at_16.25.35.png

The first snippet of code is the CSS. You’ll copy and paste this into the <head /> of your website. We should note, that while this part of the code isn’t required, we strongly suggest using it to ensure the widget layout looks great on your site.

Screenshot_2021-07-05_at_16.26.41.png

The last snippet of the code is the HTML markup. This is required, and you’ll need to paste this in the <body /> of your website, wherever you’d like the widget to appear.

Feel free to reach out to us at support@hopin.com in case you have questions or need assistance.

 

Was this article helpful?