Skip to main content
Version: Current

Insert your landing page

Once you have added the Beans iD <script> to your site you will then be able to insert your embedded landing page. This can be done by pasting the below snippet into your page in the place you want your landing page to be embedded.

<beansid-landing-page
  slug="[SLUG]"
  territory="[TERRITORY_CODE]"
></beansid-landing-page>
info

Ensure to replace the [SLUG] and [TERRITORY_CODE] with the slug and code that we will provide you at time of integration.

You may have been given this in the format [SLUG]/[TERRITORY_CODE]. If this is the case, just extract the values and use them as shown above.

Setting width and height​

You do not need to set the width and height of your embedded landing page, by default the width is set to 100% and the height to 720px.

However, in the event you do need to adjust these values, the width and height can be easily configured by providing either px or % values as width and height attributes on the <beansid-landing-page> element itself.

In the example below the width of the landing page is being set to 500px, and the height to 100%.

<beansid-landing-page
  slug="[SLUG]"
  territory="[TERRITORY_CODE]"
  width="500px"
  height="100%"
></beansid-landing-page>
note

A minimum height of 720px is enforced to ensure that all relevant content is visible to a user.

<beansid-landing-page> attributes​

AttributeExample(s)Description
slugyour-brandThis is the unique identifier for your landing page and is specific to you. It is normally something in the format brand-name and will be provided to you at time of integration.
territoryukThis is a 2 letter code which dictates which territory to load your landing page for. You can only use countries that you have asked us to set up. A full list of available countries can be found here.
width500px or 100%This property controls the width of the embedded landing page. This can be set to a px or a % value.
height800px or 100%This property controls the height of the embedded landing page. This can be set to a px or a % value. The landing page has an enforced minimum height of 720px to ensure all the relevant content is always visible to a user.
languageen-gbThis property controls which language your landing page should display in. More information on overriding language can be found on the Overriding Language page.