Embed your Scorecard on your own website

Scorecards can be embedded in any webpage where you either have access to editing the html or the platform you are using such as WordPress or a similar content management system allows you to copy and paste snippets of code .

There are 4 ways to embed you're scorecard:

  1. Full Page - Embed your Scorecard full screen over the top of your web page.
  2. Inline - Embed your Scorecard within the content of an existing web page.
  3. Pop Up - Add a button to your web page that opens your Scorecard in a pop-up window.
  4. Chat Style - Embed your Scorecard in a chat-style window.

Setting Up Embedded Scorecard Appearance

The embed options can be found in your dashboard on the left side navigation under the "Embed and Share" option

After choosing one of the embed options, customise how your embedded scorecard appears on your web page using the ‘Embed Style’ options.

On this page you will see a preview of how your selected embed option will appear on your webpage, this is especially useful if you are using the Pop up or Chat Style options as there are a number of options to configure the popup size and button appearance which are not part of your landing page design.

Starting Screen Override

The embedded scorecard will initially show your default landing page. However, you can override this by using the ‘Starting Screen’ dropdown if you have multiple landing pages and wish to display a different one.

In certain cases, you may want to utilize the 'Hide Header and Footer' option. This is useful when embedding the scorecard into a web page that already features headers and footers with your logo and navigation. Simply enable this option to seamlessly integrate the Scorecard into your existing design.

Get your embed code

Once you've selected your embed type and configured the various options click on the 'Get the code' button and copy the code from the popup that appears. This code can then be copied in to the webpage that you would like to display your scorecard on.

Tracking your embedded Scorecard with Google Analytics or GTM

When your Scorecard is embedded, it runs inside an iframe on your page - but you don't need any special setup to track it. ScoreApp automatically passes its custom conversion events (such as 'scoreapp_questions_started', 'scoreapp_lead'  and more) from the embedded Scorecard up to the page hosting it, so they fire as if they happened directly on your website.

All you need to do is make sure your analytics is installed directly on the hosting page:

  • Google Analytics 4: install GA4 on your page using the standard Google tag (gtag.js) and the custom events will appear in your GA4 property automatically, attached to the same user and session GA4 is already tracking on your site. See Setting up custom events in GA4 for your Scorecard for the full list of events and how to turn them into conversions.
  • Google Tag Manager: if the hosting page runs a GTM container, the same events are pushed to your page's data layer, ready to use in triggers. See Google Tag Manager (GTM) custom events and the data layer.

Because the events fire on your own domain, they stay attached to your visitor's existing session, there is no cross-domain setup needed, and you don't need to add your GA4 tag to the Scorecard itself when embedding. (Inside the embedded iframe, browsers would treat your GA4 tag as tracking a separate, anonymous visitor.)

Note: the embedded Scorecard doesn't send pageviews to your analytics, your page's own pageview covers the visit. Use the custom events to measure Scorecard engagement: starts, questions answered, completions and leads.

If you're a developer and want to react to these events yourself, see Embedded Scorecard events in the parent window.

Advanced: Notifying the parent window

The embedded Scorecard notifies the parent window of important events during the flow of leads moving through your Scorecard. As a developer, you can subscribe to these notifications to fire analytics events or change the state of your app. We use window.postMessage() to post events to the parent window. Find out more about these events here

Skip the Landing Page and Start on Questions

If you would like your embedded Scorecard to open directly on the questions (skipping the ScoreApp landing page), this is possible.

When the Lead Form is set to “After Questions”, the embed UI provides an option to start on the Questions screen.

If you encounter any issues or have further questions, don't hesitate to reach out to our support team. Happy embedding!

Still need help? Contact Us Contact Us