Enable Dynamic Configuration

How to make your app configurable in Studio

Studio's App Setup allows you to set up application-wide configurations without the need to redeploy the app. This is among the platform's most powerful features, meaning you can run many versions of the same app configured in different ways. For example:

1. A game that is skinned for different sponsors

2. An experience for each team in a league

This process includes defining global settings, such as those for third-party services used within the application or styling settings.

In order to read the project settings in your code, you will use the getProject function within init(), and fetch the application settings within:

async function init() {
  // Configure the SDK with the specified host and project ID
  configure({
    host,
    projectId,
  });

  // Retrieve the project details
  const project = await getProject();

  document.querySelector("h1").innerText = project.fields.app_title;

  // Retrieve the event details
  const event = await getEvent(eventId);

  // Fetch the elements for the event
  const elements = await getElements(event);

  // Identify the most recent published poll element
  const poll = elements.reverse().find(({ type }) => type === "poll");

  if (poll !== undefined) {
    // Render and set up the poll
    renderPoll(poll);
    setupPoll(poll, event);
  } else {
    // Display a warning callout message if no poll is detected
    document.getElementById("app").innerHTML =
      "No poll was found in this event. Please consider adding a poll to the event.";
  }
}

Upon reloading the app, you will be able to view the page title.