Web SDK Instructions

To implement web push notifications, you must first configure your website to work with Hood.

Hood’s web push notification system is supported across all major browsers, such as Chrome, Firefox, Edge, Safari, Opera, etc.

Here are the steps to set up your website with Hood:

1. Add New Configuration

If you haven’t already, sign up for a free account on ocamba.com

To begin the web SDK setup, click on the Add option in the top right corner.

Add New Button Location

The Configuration panel will open.

Add Partner Select Type & Name

Enter the Configuration name, specify the Partner, and then select the Web type.

Click Confirm in the bottom right corner to complete adding a new tag.

2. Add New Domain (Optional)

Once you’ve added the Web container, the Web - Container configuration screen will appear. Here, you can further customize the settings of your Web tag.

Start by switching to the Configuration tab button and then click on the Add domain to specify your web configuration domain.

Add New Domain Button Location

3. Copy - Paste the Code Snippet

Copy - paste the code snippet into the main directory of your website.

Code Snippet Tag Manager Location

4. Place the Service Worker

Download Service Worker and place it in the root files of your website.

Download Service Worker Button Location

5. Select the Type of Prompt

To add and configure Custom prompts that will be shown to the user, first click on the Edit button at the bottom of the Web - Tag configuration page.

Edit Prompt Button Location

6. See the Web SDK in Action

Once you visit a webpage that has been integrated Hood’s SDK, a subscription dialog will automatically appear.

Initial Subscription Prompt Example

After you click on Allow, the native prompt will appear as the final step in the web-based subscription process.

Native Subscription Prompt Example

Only after the user clicks on Allow, the process is completed.

Use Cases

1) Consent-driven analytics + identify

<script src="/sdk/ht.js" data-tag="TAG"></script>
<script>
  Hood('init','TAG',{ analytics: true })
  // load consent UI ...
  Hood('consent', { analytics: true })
  // after login
  Hood('identify','user-123',{ email:'[email protected]', plan:'pro' })
</script>

2) Push setup + permission + welcome notification

<script>
  Hood('init','TAG',{ push_config:{ key:'VAPID', service_worker_path:'/sw.js' } })
  Hood('pushstatus', s => console.log('status', s))
  document.getElementById('ask').onclick = () => Hood('pushrequestpermission')
  Hood('on','onPushGranted', () => Hood('pushmessage', { title:'Welcome', options:{ body:'Thanks!' } }))
</script>

3) Modal on 50% scroll with CTA

<script>
  Hood('init','TAG',{
    modal_url:'https://cdn.example.com/c/',
    modals_config:{
      modals:[{
        id:'promo', template:'promo', options:{ animation:'slide-up' },
        triggers:[{ type:'scroll', config:{ vertical:50 } }]
      }]
    }
  })
</script>

4) Tag-driven DOM injection

<script>
  Hood('init','TAG',{
    tag_config:{ tags:{
      banner:{ i:'#banner', a:'html', c:'<b>{{data.user_id}}</b>' }
    }}
  })
</script>

5) Commerce funnel tracking

<script>
  Hood('trackproductview',{ id:'sku1', price:19.9 })
  Hood('trackaddtocart',{ id:'sku1', qty:1 })
  Hood('trackcheckoutstarted')
  Hood('trackordercompleted')
</script>

📘 Hood Web SDK — Push Notification Error Codes (P_ERROR)