Webview pages allow you to display external content directly in your Swapcard event, perfect for linking to PDFs, external websites, or third-party services. With a Webview page, attendees can access content without leaving the event environment, enhancing their overall experience. This article will help you set up and customize your Webview page, adjust design elements, and manage visibility settings.
Here are some example of third-party apps that you can easily embed in your Swapcard event to provide additional features to your audience: Validar, Captello, Memento, Walls.io, Slido, Sparkup, Mentimeter, Interprefy, LiveVoice, Wordly, Syncwords.
Learn more about the basics of Pages with this article: Setting up your event's pages.
How to create a Webview page?
Navigate to Event Builder > Pages & Menu > Add page.
Click Add page, then select the Webview option under the External Services section.
Enter the following information:
Label: Name of the page displayed in the event app.
Page background image: Choose a button color and add an icon if desired.
Website: Paste the URL of the external link, PDF, or file. Please note that the URL must start with "https".
With the embedded iFrame option, the content is directly displayed within your Event or Community.
When users click the WebView page on the homepage or top navigation bar, they stay on the same tab, as shown below:
To embed an image or a PDF, you first need to host it on your server, and paste the resulting URL in the Website field. If you do not have the technical capabilities, or if you prefer to host it on Swapcard servers, please reach out to our Support Team, or your Success Manager.
How can I customize the design of the Webview page?
Customizing the Webview page ensures it aligns with your event’s branding and enhances attendee engagement:
Name: Edit the name to make it clear and engaging.
Color: Choose a button color that matches your event’s theme.
Background Design: Set a background image that reflects your event’s design.
These customizations help draw attention to your Webview page, encouraging attendees to explore the embedded content.
How to Manage the visibility settings of your Webview page?
Control who can view your Webview page by managing its visibility settings:
Groups: Select which group(s) of participants can access the page.
Public Visibility: Choose whether to make the page visible to unregistered guests.
This feature is useful for showing different Webview pages to various participant groups, such as making certain pages exclusive to VIP attendees.
How to manage the data settings of your Webview page
In the Data tab, you can edit the content URL, and how it can be accessed (via another tab, or an embedded iFrame).
Once set up, attendees will see the Webview button on your event’s homepage or other designated areas. Clicking it will display the embedded content directly within the app, allowing them to access external resources without leaving the platform.
How to add variables to the Webview URL
When customizing the Webview URL, you can add user variables to track visitors from a third-party tool or create a more personalized experience for your audience.
To insert a variable, click the icon next to the URL input field and choose from the following options:
First name
Last name
Email
Job title
Company
User ID
Community Profile ID
Client ID
Short text Custom field
URL Custom field
If you need a unique URL for each attendee, you can store their individual URL in a custom URL field that's hidden from their profile. Learn more about creating custom fields and managing custom field visibility here.
How to embed a google document as an iFrame
If you don't have the embeddable link to your document directly from a third party server, we recommend the following process:
Host the document directly on Swapcard servers, by going to Studio → Content → Documents and Links, where you can upload the document and use the automatically generated URL.
Paste the URL of your hosted document at the end of the following URL (replacing [file_url])
https://docs.google.com/viewer?url=[file_url]&embedded=true
Example:
https://docs.google.com/viewerng/viewer?embedded=true&url=https://cdn-api.swapcard.com/public/files/c64e6c8a8bd649da8ccbfe7f7375335d.pdf
Make sure the file visibility is not restricted, paste the updated link to your Webview Page and select ‘embedded iFrame.
How to embed a Google drive folder as an iFrame
To embed a Google Drive Folder, choose your preferred display below (list or grid) and replace “YOUR ID” with the ID of your folder. Make sure the folder visibility is not restricted, paste the updated link to your Webview Page and select ‘embedded iFrame’.
List View:
https://drive.google.com/embeddedfolderview?id=YOURID#list
Grid View:
https://drive.google.com/embeddedfolderview?id=YOURID#grid
Folder ID is the string after the /folders/ part of the URL:
Important Considerations
Ensure the URL is correctly linked to avoid access issues.
Review who can see your Webview content.
Design the button to be visually appealing to boost interaction.
Setting up a Webview page within your Swapcard event enhances content accessibility, providing a seamless way for attendees to interact with external resources. By following the setup steps and customizing the design, you can create a smooth, engaging experience for your attendees.
Read more