Skip to main content

​
Overview

Call-to-Action (CTA) buttons allow you to direct participants from your 9Pic gallery to external pages, such as event registration, feedback forms, or merch stores. You can configure where these buttons appear and how they look, and even pass participant details (like BIB numbers) to your external page for a seamless transition.

​
Configuration Options

When setting up a CTA in the Advanced tab of your event settings, you have the following options:

​
Target URL

The destination URL where users will be sent when they click the button.
[!TIP] Always use a full URL including https:// (e.g., https://example.com/register).

​
Button Text

The text displayed on the button (e.g., “Register for 2025”, “Get Your Certificate”).

​
Display Locations

Select one or both locations for the button to appear:
  • Search Bar: Appears prominently near the photo search area.
  • Search Results: Appears at the top of the gallery once a user has searched for their photos.

​
Button Style

Choose a visual style that matches your branding:
  • Default: Solid primary color.
  • Outline: Bordered button.
  • Secondary: Subtle background color.
  • Ghost/Link: Minimalist styles.

​
Organizer Integration (Advanced)

When a participant clicks your CTA button, 9Pic automatically appends several query parameters to your Target URL. This information allows you to build custom flows, personalize landing pages, or track referrals.

​
Passed Parameters

ParameterTypeDescription
refString (Base64)The full URL of the gallery page the user was viewing.
eventIdStringThe unique ID of your event.
bibNumberString(If searched) The BIB number the user entered to find their photos.
selfieRequestIdString(If searched) The unique ID for their selfie search request.

​
How to use the ref parameter

The ref parameter is Base64 encoded to prevent URL character conflicts. To use it, you must decode it on your destination page. Example (JavaScript): 
const urlParams = new URLSearchParams(window.location.search);
const encodedRef = urlParams.get('ref');
if (encodedRef) {
  const originalUrl = atob(encodedRef);
  console.log("User came from gallery:", originalUrl);
}

​
Use Case Example: Personalized Registration

If you want to pre-fill a registration form for next year’s event using the participant’s BIB number:
  1. Configure CTA: Set Target URL to https://my-race.com/register-2025.
  2. User Flow: Participant searches for BIB 529 in their 9Pic gallery.
  3. Redirection: Clicking the CTA takes them to: https://my-race.com/register-2025?ref=...&eventId=123&bibNumber=529
  4. Your Page: Your website reads bibNumber=529 and automatically looks up the participant’s name to welcome them.

​
Previews

TODO screenshot: /images/advanced/cta-preview-search.png (CTA button visible in the search bar area) TODO screenshot: /images/advanced/cta-preview-results.png (CTA button visible in the results gallery)