### Multiple Poplink Instances Configuration for Multiple Search Boxes Source: https://docs.geniee-search.net/poplink/technical_reference/installation This JavaScript example illustrates how to implement multiple Poplink instances on a single page, each targeting a different search box. The Poplink settings are provided as an array of objects, where each object represents a unique Poplink configuration with its own `uid` and `target` selector. This allows for distinct Poplink behaviors for different search interfaces on the same web page. ```javascript var poplink3 = [{ uid: "[1 つ目の契約の UID]", target: "#q1", deviceType: 'pc022' }, { uid: "[2 つ目の契約の UID]", target: "#q2", deviceType: 'pc033' }]; (function(){ var script = document.createElement("script"); script.setAttribute("src", "https://js.poplink.jp/[タグマネージャーの ID]/poptagmanager.js?ts=" + Date.now()); script.setAttribute("defer", true); document.head.appendChild(script); })(); ``` -------------------------------- ### Poplink Tag with Additional Parameters and HTML Structure Source: https://docs.geniee-search.net/poplink/technical_reference/installation This example shows how to embed the Poplink tag within a full HTML document structure. It includes additional parameters like `suggestCount` to control the number of suggestions displayed and places the script just before the closing `` tag, which is the recommended location. The `uid`, `target`, and `deviceType` parameters are essential for Poplink functionality. ```html ``` -------------------------------- ### Multiple Poplink Setup Source: https://docs.geniee-search.net/poplink/technical_reference This section explains how to implement multiple poplinks on the same page by passing an array of configurations. It highlights the importance of specifying unique 'target' and optionally 'uid' for each poplink. ```APIDOC ## POST /websites/geniee-search_net_poplink ### Description Implement multiple poplinks on a single page by providing an array of configurations for each poplink. Ensure that the 'target' parameter is unique for each poplink instance. ### Method JAVASCRIPT ### Endpoint N/A (Client-side JavaScript implementation) ### Parameters #### Request Body - **poplink3** (Array) - Required - An array where each object represents the configuration for a single poplink. - **uid** (String) - Required - The unique identifier for your Poplink contract. - **target** (String) - Required - A CSS selector targeting the search box element. - **deviceType** (String) - Optional - Specifies the layout for the poplink (e.g., 'pc022', 'pc033'). ### Request Example ```javascript var poplink3 = [{ uid: "[1 つ目の契約の UID]", target: "#q1", deviceType: 'pc022' }, { uid: "[2 つ目の契約の UID]", target: "#q2", deviceType: 'pc033' }]; // Tag Manager (function(){ var script = document.createElement("script"); script.setAttribute("src", "https://js.poplink.jp/[タグマネージャーの ID]/poptagmanager.js?ts=" + Date.now()); script.setAttribute("defer", true); document.head.appendChild(script); })(); ``` ### Response #### Success Response (200) N/A (This is a client-side script execution) #### Response Example N/A ``` -------------------------------- ### Poplink Tag Configuration Example Source: https://docs.geniee-search.net/poplink/technical_reference This JavaScript snippet shows how to configure the Poplink tag, including the `gaType` parameter. It demonstrates setting `gaType: "gtag"` for Global Site Tag integration. ```javascript // ポップリンク設定タグ var poplink3 = { uid: "[UID]", target: "#q", deviceType: 'pc022', gaType: "gtag" }; ``` -------------------------------- ### Responsive Poplink Device Type Configuration Source: https://docs.geniee-search.net/poplink/technical_reference/installation This JavaScript snippet shows how to configure Poplink for responsive web design, allowing different layouts for desktop and mobile devices. The `deviceType` parameter is set to an object with `desktop` and `mobile` keys, specifying the respective device types ('pc011' for desktop and 'sphs' for mobile in this example). This ensures the Poplink interface adapts appropriately to the user's screen size. ```javascript deviceType: { desktop: 'pc011', mobile: 'sphs' } ``` -------------------------------- ### Frontend Customization with Stylesheets Source: https://docs.geniee-search.net/poplink/technical_reference This guide explains how to customize the display styles of Poplink using external or inline stylesheets. It outlines three methods for applying custom CSS and notes the potential need for `!important` to resolve style conflicts. ```APIDOC ## Frontend Customization - Display Styles ### Description Customize the layout and display styles of Poplink by adding custom stylesheets. Three methods are provided for applying these styles. ### Methods 1. **`userStyleSheet` parameter**: Specify a CSS file hosted on your server via the `userStyleSheet` parameter in the Poplink tag (Recommended). 2. **Link tag**: Include a CSS file hosted on your server using a `` tag. 3. **Style element**: Add a `