Embed Guest-Facing Portals into Website

Alfie

March 20, 2025 02:53

This article describes how to Embed Aluvii's guest-facing portals into your website using an embedded widget. This gives guests a seamless online shopping experience without leaving your website. To see a sample of opening the event portal, click the button below:

Add Javascript Snippet to Website Footer

First, have your website administrator add the javascript snippet below in the footer section of your website. Make sure to substitute your Aluvii tenant name into the widget uri (see red text below).

<script src="https://cdn.aluvii.com/libs/aluvii-widget/latest/aluvii-widget.min.js"></script>
<script>
AluviiWidget.init({ 
  widgetUri: "https://tenantName.aluvii.com" 
});
</script>

Configure Website Buttons to Launch Widget

Your website likely has various buttons and links that prompt your guests to make an online purchase such as book a birthday party, purchase admission tickets, or sign a waiver. These buttons need to be configured to launch the embedded widget. To do this, you'll add a CSS class to each website button following the naming convention to target specific pages and portals depending what page you want the button to open.

Examples

1. Event portal - To trigger the event portal, add the CSS class "aluvii-event-portal" to any buttons you want to launch the landing page of the event portal. A simple button might look like this and have the CSS class shown below:

<button class="aluvii-event-portal">Launch Event Portal</button>

2. Store portal - Coming Soon

3. Waivers - Coming Soon

Customize Widget Width on Screen (Optional)

The widget automatically adjusts its width based on the user's screen size to provide an optimized experience for both desktop and mobile users.

Default Behavior

Mobile Devices: The widget will pop out at 100% of the screen width, ensuring a fully responsive layout for smaller screens. A user is detected as a mobile device if any of the following criteria are met:
- This is detected if the user agent is for mobile, Android, iPhone, iPad
- If the screen using it is touch enabled
- Max screen width of 900px
Desktop Devices: The widget will pop out at 50% of the screen width, providing a balanced layout for larger screens.

Static Width

You can specify a static width by specifying a width property in the JavaScript snippet. This property accepts any valid CSS width value, such as percentages ("75%") or fixed pixel values ("600px"):

<script> src="https://cdn.aluvii.com/libs/aluvii-widget/latest/aluvii-widget.min.js"></script>
<script>
AluviiWidget.init({
  widgetUri: "https://tenantName.aluvii.com",
  width: "75%", // Custom static width
});
</script>

Dynamic Width Customization

For more advanced customization, you can define a dynamicWidth property in the JavaScript snippet. If you want to override these defaults and set your own dynamic width, you can add custom values to the JavaScript snippet. This allows you to specify different widths for specific screen size ranges:

<script src="https://cdn.aluvii.com/libs/aluvii-widget/latest/aluvii-widget.min.js"></script> 
<script>
AluviiWidget.init({
  widgetUri: "https://tenantName.aluvii.com",
  dynamicWidth: [
   { minWidth: 0, maxWidth: 500, widgetWidth: "100%" }, // Mobile
   { minWidth: 501, maxWidth: 1200, widgetWidth: "75%" }, // Tablet
   { minWidth: 1201, maxWidth: Infinity, widgetWidth: "50%" }, // Desktop
  ]
});
</script>

Additional References

If you are using the WiX platform, here are some helpful articles that can help you implement this function.

Adding the script in WiX settings - Click Here
Adding CSS Class to Buttons of WiX website - Click Here