---
updatedAt: 2026-08-03T07:46:15.000Z
agentTools:
  projectIndex: https://developers.taboola.com/taboolasdk/llms.txt
---

# Basic Integration

*Android Web* - Basic Integration

> ✅ Sample App
>
> While reading the documentation, take a look at our <a href="https://github.com/taboola/android-sdk-examples-4x" target="_blank">Sample App</a>.

> 🚧
>
> This integration requires you to connect **JavaScript** code (in your web content) with **Java** code (in your **Android** app).

## Initialize Taboola

> 📘
>
> The initialization steps in this section are the same for Classic *and* Web integrations.

1. Create a `TBLPublisherInfo` object and initialize **Taboola**:

```java
TBLPublisherInfo publisherInfo = new TBLPublisherInfo("publisher-id");
Taboola.init(publisherInfo);
```

> 🚧
>
> This initialization is required *once* per application. It should be done as early as possible - preferably in a sub-class of `Application`.

> 📘 Params
>
> `publisher-id` - a *unique, machine-readable* string (without spaces), **as provided by Taboola**.
>
> > E.g. `"sdk-tester-demo"`

## Add Taboola JS tags

1. Add the following meta tag to the `<head>` section of your *web content*:

```html
<meta name='viewport' content='width=device-width, user-scalable=no'/>
```

2. Add the following JS script to the `<head>` section of your *web content*, and **edit** the default text:

```html
<script type="text/javascript">
     window._taboola = window._taboola || [];
     _taboola.push({page_type:'auto', url:'page-url'});
     !function (e, f, u, i) {
          if (!document.getElementById(i)){
               e.async = 1;
               e.src = u;
               e.id = i;
               f.parentNode.insertBefore(e, f);
          }
     }(document.createElement('script'),document.getElementsByTagName('script')[0],
     'https://cdn.taboola.com/libtrc/publisher-id/mobile-loader.js',
'tb_mobile_loader_script');
</script>
```

**Editing instructions:**

<Table align={["left","left","left"]}>
  <thead>
    <tr>
      <th>
        Default text
      </th>

      <th>
        Instructions
      </th>

      <th>
        Notes
      </th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>
        `page-type`
      </td>

      <td>
        **Replace** this with the relevant page type (as provided by **Taboola**) - e.g. `article`:  

        `article:'auto'`
      </td>

      <td>
        Possible values:
        `video`, `article`, `photo`, `search`, `category`, `home`.
      </td>
    </tr>

    <tr>
      <td>
        `'auto'`
      </td>

      <td>
        To obtain an automated ID, leave this param as is:
        `article:'auto'`  

        Else, insert your own, internal ID:
        `article:'123'`
      </td>

      <td>
        Specifies the ID of this page, for the given page type.
      </td>
    </tr>

    <tr>
      <td>
        `'page-url'`
      </td>

      <td>
        Insert the canonical web URL of the page:  

        `url:'https://www.example.com/articles?id=123'`
      </td>

      <td>
        Required so that **Taboola** can crawl the page for metadata and contextual data.
      </td>
    </tr>

    <tr>
      <td>
        `publisher-id`
      </td>

      <td>
        Insert your Publisher ID (as provided by **Taboola** - e.g. `'sdk-tester-demo'`) into the **URL**:  

        `'https://cdn.taboola.com/libtrc/sdk-tester-demo/mobile-loader.js'`
      </td>

      <td>

      </td>
    </tr>
  </tbody>
</Table>

3. **For each placement**, add the following JS tag to the `<body>` of your *web content*, and **edit** the param **values**:

```html
<div id="my-container"></div>
<script type="text/javascript">
     window._taboola = window._taboola || []; 
     _taboola.push({mode: 'mode-here',
     	container: 'container-id-here',
     	placement: 'placement-here',
     	target_type: 'mix'});

 // Notice - this part is unique to mobile SDK JS integrations!
_taboola["mobile"] = window._taboola["mobile"] || [];
_taboola["mobile"].push({
   publisher:'publisher-id-here'
});
</script>
```

4. Add the Taboola flush tag to the page `<body>`, immediately after the last placement tag:

```html
<script>
  // A global queue for all Taboola commands on the page
  window._taboola = window._taboola || [];
  
  _taboola.push({flush: true});
</script>
```

> 🚧 Guidelines
>
> * The flush flag instructs Taboola to fetch recommendations (and not wait for additional data).
> * Pass the flush flag once only - after passing all placements for that page.
> * If you have unique requirements, reach out to Taboola to discuss alternative flows.

> 📘 Params
>
> * `mode` - The UI Mode ID of the placement, as provided by **Taboola** - e.g. `'thumbs-feed-01'`.
> * `container` - The ID of your HTML element that contains the **Taboola** content - e.g. '`my-container`'.
> * `placement` - The placement name, as provided by **Taboola** - e.g. `'Feed without video'`.
> * `target_type` - The target type, as provided by **Taboola** - e.g. `'mix'`.
> * `publisher` - Your Publisher ID (aka Account ID) - a unique, *alphabetic* string, as provided by **Taboola** - e.g. `'sdk-tester-demo'`.

4. Load the content within your web view - e.g.:

```java Sample code snippet
...

// Build a Taboola WebView - and pass it a reference to your own WebView:
TBLWebPage tblWebPage = Taboola.getWebPage();
TBLWebUnit tblWebUnit = tblWebPage.build(webView, new TBLWebListener() {
    ...
});

// Load content within your own WebView:
String htmlContent = null;
try {
    htmlContent = TBLAssetUtil.getHtmlTemplateFileContent(getApplicationContext(), HTML_CONTENT_FILE_TITLE);
} catch (Exception e) {
    ...
}

webView.loadDataWithBaseURL(base_url, htmlContent, "text/html", "UTF-8", "");
```

> 🚧 WebView
>
> If you use `loadDataWithBaseUrl()`, make sure to set a base URL.

> 🚧 Flow
>
> If you load content within your own web view - and *then* register it with the **Taboola** web view - make sure to refresh its content.

## Build Taboola content instances

> 🚧 Guidelines
>
> 1. The goal is to wrap *your* web view with **Taboola** services.
> 2. For each *page*, initialize 1 `TBLWebPage` instance, and create 1 `TBLWebUnit` instance *only*.
> 3. Each *placement* is implemented via a JS tag (*not* via a `TBLWebUnit` instance). These JS tags inject **Taboola** content into your own content.

In your Activity/Fragment *Java file*:

1. Obtain a Taboola **WebPage** instance:

```java
TBLWebPage tblWebPage = Taboola.getWebPage();
```

2. Build a Taboola **Unit** instance, for that **WebPage**:

```java
TBLWebUnit tblWebUnit = tblWebPage.build(<yourWebView>, new TBLWebListener() {});
```

> 📘
>
> For more detail about `TBLWebListener`, see: [Advanced Options](https://developers.taboola.com/taboolasdk/docs/android-sdk-web-advanced-options).

3. Obtain a `WebSettings` instance for your Web View - and add the following settings:

```java
WebSettings settings = <yourWebView>.getSettings();
settings.setJavaScriptEnabled(true);

// (Optional) Enable WebView debugging in your 'debug' builds.
// This makes debugging easier for any issues related to WebViews.
// See: https://developers.google.com/web/tools/chrome-devtools/remote-debugging/webviews
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
    WebView.setWebContentsDebuggingEnabled(true);
}
```

4. Once you have created the single `TBLWebUnit` instance, your integration is complete. The rest of the work is done by the JS tags.

> 🚧
>
> If you are using `ViewPager`, see: [Advanced Options](https://developers.taboola.com/taboolasdk/docs/android-sdk-web-advanced-options)

## The Click Event

Each time you build a `TBLWebUnit`, you pass a subclass of `TBLWebListener` that listens for events.

If desired, you can use this listener object to intercept the **item click** event, and open **organic** content directly within your app:

```java
TBLWebUnit tblWebUnit = 
tblWebPage.build(<Context>, <placementName>, <mode>, <placementType>, new TBLWebListener(){
  
    @Override
    onItemClick(String placementName, String itemId, String clickUrl, boolean isOrganic, @Nullable String customData) {
        // Insert your code here...
        // Return 'false' if you are handling the click event yourself, or 'true' if you want Taboola SDK to handle the click event.
        // Note: you can override the default behavior for *organic* content only.

    }
});
```

> 🚧
>
> You can override the default behavior for **organic** content **only**

> 📘
>
> For more information, see [Event Handling](https://developers.taboola.com/taboolasdk/docs/android-sdk-web-events) and [onItemClick](https://developers.taboola.com/taboolasdk/docs/android-sdk-web-events#onitemclick).

## Well Done!

You have completed the basic integration steps!

If everything is working smoothly, take a look at the **What's Next** section below.

<Callout icon="🙈" theme="default">
  ### Taboola content not rendering?

  1. Test with the same params as the [sample app](https://developers.taboola.com/taboolasdk/docs/sample-code), and see if those work.
  2. **Still stuck?** Submit a question in our [forum](https://developers.taboola.com/taboolasdk/discuss).
</Callout>

## What's Next?

1. For handling clicks and other important events, see [Event Handling](https://developers.taboola.com/taboolasdk/docs/android-sdk-web-events).
2. In order to provide *personalized* recommendations for impressions in the *EU* and *California*, make sure to implement [GDPR and CCPA](https://developers.taboola.com/taboolasdk/docs/android-sdk-web-user-consent) respectively.
3. If you have not already done so, make sure to look at our [sample app](https://developers.taboola.com/taboolasdk/docs/sample-code).
4. Once you are complete, submit your app for review - see the [App Verification](https://developers.taboola.com/taboolasdk/docs/android-sdk-web-app-verification) section.