APIs and Widgets
Start typing to search…

Search CTA Widget

The search cta widget allows user to call search overlay withing the page.

🚧

This widget is deprecated. Please speak to your account manager about an alternative solution.


Embedding the Widget

  1. Ensure you've got a valid affiliate id.
  2. Create a new html page and add the following markup:
<!doctype html>
<html lang="en">
  <head>
    <title>Search CTA widget example</title>
  </head>
  <body>
    <div
        data-app="search-app"
        data-affiliate-id="encoretickets"
        data-view-name="search-cta"
        data-target-overlay-div="navigation-bar"
    ></div>
     <!-- js -->
    <script type="text/javascript" src="https://search-service.tixuk.io/vLatest/js/search-app.js"></script>
  </body>
</html>

Supported data attributes

In addition to the standard search data attributes, the following data attributes are used to customise the behaviour or 'look and feel' of the Input Search widget.

Name

Mandatory

Type

Description

data-view-name

yes

string

Title of special widget's view user wants to insert. Represent widget type.

There are several views:

input-search
search-results
search-results-with-filters
search-cta
In case of this widget "search-cta" should be used. Example:

data-view-name="search-cta"

data-target-overlay-div

Yes

String

Class name of container when user wants to insert widget. Usually, it's navigation bar.

Example:

data-target-overlay="navigation bar"

data-overlay-only

No

Boolean

Shows overlay container without CTA button

Example:

data-overlay-only="true"