Website integration checklist

Work through this before the page goes live. Most embed problems show up in ten minutes of testing, and cost a day if they surface on launch morning.

Before you build

• The campaign is published in Studio, so there's a real address to test.
• You know whether the page shows one touchpoint, or a landing page with several.
• The experience is served from a subdomain of the site it will appear on, and that address is live. Sign-in doesn't persist otherwise.
• Your developer has chosen a loading method. See About website integration.
• Your developer knows whether your site signs visitors in, so the page sets sign-in state correctly.

Test on the real page

Test on the actual page, in a staging environment, with its real security policy applied. A blank test page hides most of what goes wrong, because the problems come from the page around the embed.

• Run the full journey through to the reward or confirmation.
• If participants sign in, sign in from inside the experience. You should come back to the same page, still signed in. This is what fails when the domains don't match.
• Open the page again from its plain address, and check the participant starts in the sign-in state your page sets.
• Watch the frame resize between steps. It shouldn't jump, leave a gap or show its own scrollbar.
• Check your footer sits right below the experience at every step, rather than floating mid-page or being pushed off screen.
• Scroll down a long page and open a panel. It should scroll into the middle of the screen.
• If your site has a sticky header, check panels open below it, not behind it.
• Test on a phone. A frame that looks fine at desktop width often crops on mobile.
• Turn the phone sideways with a panel open. The panel should still fit the screen.
• If the experience uses the camera, test the permission prompt on a real device.
• Load the page on a slow connection, and watch what the visitor sees before the experience appears.

Before you launch

• If you tested on a Staging campaign or a duplicate, replace its link with the live campaign's: in id with the tag, in the frame's address otherwise.
• With the tag, check the page loads the script from cdn.21-digital.com, not the Staging cdn-uat.21-digital.com.
• Replace any Staging experience host with the live one, in your page's code and your security policy.
• Check rewards and prize stock are set up, and the campaign is published.
• Check the page on the browsers your analytics say your visitors use.

Where to send a problem

If you're a partner, raise each problem through the centre's Studio admin. Send the campaign link, the touchpoint ID, the device, the time it happened and a console log.

Next steps

• What your page must handle
• Test your game
• Publish a game