FOX Sign-in Integration 2

Getting the FOX User ID into the widget

When the widget is loaded, we setup a cross-domain messaging channel between the hosting page (in this case and the widget. This is used to dynamically resize the widget container whenever certain actions in the widget are triggered (for example, switching to results page).

This XDM channel can be used to call functions inside the widget and vice-versa.

There are a number ways to get the FOX User ID into the widget:

  1. Create a method or property on the hosting page that returns the FOX User ID or profile information, such as
    FsPageModel.attributes.authentication.userId or FsPageModel.attributes.authentication.getUserId()
  2. Call a method we will create, passing the FOX User ID on page load.


When the widget detects that a FOX User ID is passed to it, the sign in/sign up buttons will not be displayed anymore and user will be treated as signed in on the widget as well.


Allowing signups from within the widget

The most straightforward way to allow registrations from within the widget is to allow the widget to open the FOX sign up modal dialog. When a user clicks the ‘sign up’ button from within the widget after making a prediction, we can simply call a method on the hosting page that displays the sign up modal.

After a user signs in or signs up, the page is refreshed and the widget is loaded again. At this point, calling the method above (for getting the FOX User ID into the widget) now gives the widget a value.

Another more complicated way is to provide us a sign up page that allows supplying a redirect URL. When a user clicks the ‘sign up’ button, the widget frame is redirected to this page. As the user signs up or signs in, he or she is redirected back to the widget – passing in the FOX User ID as a query parameter in the redirect URL.


Sample flow


From a FOX Sports page hosting a widget, a user makes a prediction. A call to action is presented in the results page asking the user to sign up. When the user clicks the button, the sign up dialog in the hosting page is triggered. After the user signs up, the page is refreshed, and the widget is reloaded as well.

Since the user is now signed in to FOX Sports, the widget can freely get the FOX User ID from the hosting page and adjust it’s presentation – in this case, not showing the call to action anymore.

With this flow, the only thing needed on FOX Sports’ end is to expose FOX User ID as well as method to show the sign in/sign up dialog. It will also make the user experience feel like the widget is actually part of the page.

Interaction test

Below is a widget that simulates the suggested behavior, as if it were hosted on the FOX Sports site. When you click sign up, it launches the sign in/sign up dialog. When you click any of the buttons, the page is ‘refreshed’.

Now that the page is refreshed and user is signed in at the FOX Sports, when the widget below loads, it tries to get the FOX User ID from the hosting page – recognizes that there is a value, and does not display the sign up button anymore. At this point, the FOX User ID is associated to the user’s prediction in our backend, which can be used for ‘closing the loop’.