FAQ: Do I need to add the widget to the head tag?

While placing the widget in the head tag is one of the quickest ways to get started with Acquire, it’s not the only way. In this article, we’ll discuss other ways of displaying the widget on your site. 

In this article:

• Displaying the Widget on a Page of Your Website
• Displaying the Widget When a Button Is Clicked

Before implementing these alternatives, keep in mind that placing the widget code outside of the head tag may result in continual loading, which may make a page load times slower.

You should also consider how you want the widget to function. When the widget code is added to the head tag, it will appear on every page of your site. Acquire's Business Rules were designed with this functionality in mind. Visitors may also need explicit instructions to access the widget if it is tied to a button click or on a different page. In addition, keep in mind that some of these implementations may require web development knowledge to execute. 

Displaying the Widget on a Page of Your Website

If you’d like to display the widget on a page of your website, you can do so by having the script source point to your Acquire widget code URL.

For example: 

const script = document.createElement('script');

script.src = "https://account_id.acquire.io/widget.js";

script.async = true;

document.body.appendChild(script);

 In this example, we’ve used the useEffect React Hook to render the widget in this component. 

In this example, the widget appears on a different page. 

On a mobile device, the widget will take up the entire screen. 

Displaying the Widget When a Button Is Clicked

If you want the widget to appear after the visitor clicks a button, you may bind the widget’s appearance to the onclick event. 

In this example, we’ve used the useEffect React Hook to render the widget with the following script:

const script = document.createElement('script');

script.src = "https://account_id.acquire.io/widget.js";

script.async = true;

document.body.appendChild(script);

In this example, the widget appears when a button is clicked. 

For more on widget customization, see the article Changing Widget Advanced Settings: Functionality and Custom CSS.