Embedding on your website

From XING Events Developer Documentation

If you have your own event website you should provide your attendees with the best registration experience by embedding your ticketshop/registration form directly on your page.
You do not need a developer to do this, we give you the code and you just need to copy/paste it to your page. You will find the code at the menu item "Sales channels -> Your website or app" in your event's administration area.

Here are some more advanced options you have while embedding the shop on your page.

Documentation

Structure of our embedding code

Our embedding code consists of a JavaScript file and an IFrame that needs to be put in the HTML of your website.

<script type="text/javascript" src="https://www.xing-events.com/resources/js/amiandoExport.js"></script>
<iframe src="https://<IDENTIFIER>-modules.xing-events.com/<IDENTIFIER>.html?viewType=iframe&..." frameborder="0" width="650px" id="_amiandoIFrameXXXXX">
    <p>This page requires frame support. Please use a frame compatible browser to see the ticket sales module.</p>
</iframe>

The JavaScript is responsible to resize the iframe to the size it needs to display its content without scroll bars and to technically enable cross-domain Google Analytics tracking. Feel free to check the source code of the JavaScript [1].

The iframe's source is the URL to your event page (containing your event identifier) and multiple query parameters (explained in the next section). As sub-domain by default "<IDENTIFIER>-modules" is used to ensure users are on a fresh session and not "influenced" by possible sessions of ticketshop of other events. In case you are integrating multiple IFrames on your page, make sure that everyone has a unique subdomain (ending with "-modules") to ensure no session interference.

A standard (maximum) width is set for the iframe of 650px, feel free to adapt it if you want it to be wider (not recommended), if the container of the iframe is smaller than 650px the iframe will automatically reduce its width, so usually it is not needed to manually edit this parameter.
The id parameter is important and needs to have the format "_amiandoIframe*" and needs to be unique on your webpage to make sure the outer javascript can find the iframe.

Parameter

Parameter Information Default
viewType This parameter must always be set to "iframe" (other values or missing parameter will return the full event page instead) normal
resizeIFrame If set to "true" the iframe will automatically resize in height/width to make the content fit (recommended). If it is set to false or missing, scrollbars might be shown if the content doesn't fit the provided space. If the parameter true is used it is important, that the JavaScript in front of the iframe is included, otherwise the resizing won't work and registering might not be possible because content is cut off and no scrollbars are available. false
distributionChannel Allows tracking the registrations of your different channels (e.g how many tickets are sold on XING, in a XING app or in this iframe). You can set any (URL encoded) value here to name this channel, especially use-full if you integrate the shop on multiple pages and want to understand the success of each page (otherwise you can keep this parameter as its default) CHANNEL_IFRAME
language Allows setting the language the shop should be initially shown in (if multiple languages in the shop are available the user can still choose a different language to continue). Allowed values are de,en,fr,es. Main language defined in the event
simple_cbox Background color of the iframe in HEX format without hastag (e.g. FF0000 for red) Background color defined in the event
simple_ctext Text color to be used in this iframe in HEX format without hastag (e.g. FF0000 for red) Text color defined in the event
simple_clink Link color to be used in this iframe in HEX format without hastag (e.g. FF0000 for red) Link color defined in the event
marketingConsentGiven This parameter can be used to pass the information to the iframe if the user has given his consent to marketing tracking ("Cookie Banners"). If the parameter is "false" or missing, Google Analytics, AdWords and Facebook Pixel tracking code will not be included in the shop. false
step The step in the shop to open. This can only be used if a purchase has already been started (via API), e.g. to pre-fill data in the registration process. Possible values are buyerData, ticketData, paymentOptions, paymentData, checkData. See the example Pre-fill the ticketshop with buyer data via REST API for more details. empty = ticket selection step
startIdentifier A token that loads an existing (previous) registration (or pre-registration). This parameter should only be of interest if a purchase is pre-filled vis API. See the example Pre-fill the ticketshop with buyer data via REST API for more details. empty = new purchase
queueIdentifier A token that loads the ticket from the reservation queue. This parameter should only be of interest if a purchase is pre-filled vis API. See the example Pre-fill the ticketshop with buyer data via REST API for more details. empty = new purchase
panelId We also allow integrating other modules from your XING Events event page beside the ticketshop. To identify those other modules their panel ID needs to be provided with this parameter. The integration of other modules is deprecated and we do not recommend to use them anymore, therefore this parameter can be discarded. empty = ticketshop module

Troubleshooting

Multiple ticket shop iframes on one website

If you want multiple ticket shop iframes on one website, there are a few things to keep in mind to make sure the resizing is working properly and sessions are not shared between the two shops:

  • - Every iframe needs to have its own subdomain.
  • - Every iframe needs to have an unique ID like:
    <iframe src="https://<SOMETHING UNIQUE>-modules.xing-events.com/..." ... id="<ALSO SOMETHING UNIQUE>">
  • - The Javascript only needs to be included once

Responsiveness (Mobile)

The ticket shop iframe is automatically responsive, that means if your webpage is viewed on a small screen, like a mobile device, the ticketshop automatically adapts its width and content to fit the screen and provide the user with the best usability.
In case this is not working on your website, please check the following:

  • - Is our Javascript included and properly loaded?
  • - Is your own webpage responsive? If your own page (i.e. the container the iframe is included in) doesn't resize properly, then the shop can't as well.
  • - Is the shop iframe included within another iframe? If that outer iframe doesn’t adapt to the screen size of your visitor, neither does the ticket shop. So best take the ticket shop iframe out of the other iframe to ensure the best mobile experience for your visitors.