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.
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 embed a google document as an iFrame
You need to have a URL pointing to the PDF version of the document you want to embed. For this, you should start with this base URL:
https://docs.google.com/viewerng/viewer?embedded=true&url=PUT_THE_HOSTED_URL_HERE
and paste the URL of your hosted document at the end (replacing "PUT_THE_HOSTED_URL_HERE").
https://docs.google.com/viewerng/viewer?embedded=true&url=https://cdn-api.swapcard.com/public/files/c64e6c8a8bd649da8ccbfe7f7375335d.pdf
If you'd like to host the document on Swapcard servers, go to Studio → Content → Documents and Links, where you can upload your document and use the URL automatically generated.
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