---
title: 'Verb SDK Snippets'
---

Verb SDK Snippets
===

Vanilla JS
---

#### Scripts

<script src="https://app.verbdata.app/sdk/verb-sdk.js"></script>

<!-- Place this before the html body closing tag or in head tag -->
<script>
    window.verbAsyncInit = function() {
      Verb.init({
        apiKey           : "31308c69-6a78-4501-a0dc-761be4ab08d3",
        version          : "v1.0",
        authParams       : 
        {
          "btoken": "REPLACE_WITH_VALUE"
        }, 
      });
    };
</script>

#### Dashboard including filters

<!-- Place this where you want verb dashboard to appear in your page -->
<div
    x-verb-dashboard="true"
    x-collection-id="45b02e8e-cc63-401b-b691-fe669e955a58"
></div>

#### Separate Filter Embed Script

<!-- Place this code where you want filter to appear -->
<div 
    x-verb-filters="true"
    x-collection-id="45b02e8e-cc63-401b-b691-fe669e955a58" 
></div>

<!-- BREAK -->

<!-- Place this where you want verb dashboard to appear in your page -->
<div
    x-verb-dashboard="true"
    x-collection-id="45b02e8e-cc63-401b-b691-fe669e955a58"
></div>

#### Control Filter via SDK

<!-- Filter control example -->
<script>
    // Set numeric filter named "{filter name here}"
    window.verbAsyncUpdate = function() {
        Verb.getDashboardCollection("verb-45b02e8e-cc63-401b-b691-fe669e955a58")
            .setFilterVal("78b91972-ba29-4fb3-a14e-3339568d76a7", {
              "$type": "NumericFilterValue",
              "option": "EqualTo",
              "valueOrMin": 147
        });
    }
</script>

<!-- BREAK -->

<!-- Place this where you want verb dashboard to appear in your page -->

<div
    id="verb-45b02e8e-cc63-401b-b691-fe669e955a58"
    x-verb-dashboard="true"
    x-collection-id="45b02e8e-cc63-401b-b691-fe669e955a58"
></div>

React
---

#### Scripts

<script src="https://app.verbdata.app/sdk/verb-sdk-react.js"></script>
<script>
    window.VerbParams = {
        apiKey           : "31308c69-6a78-4501-a0dc-761be4ab08d3",
        version          : "v1.0",
        authParams       : {
            "btoken": "REPLACE_WITH_VALUE"
        },
    };
</script>

#### Dashboard including filters

import React from "react";
import ReactDOM from "react-dom"

<div>
   {
       /*Place this where you want verb dashboard to appear in your page*/
       window.VerbDashboard({
            collectionId: "45b02e8e-cc63-401b-b691-fe669e955a58",
            React: React,
            ReactDOM: ReactDOM
        })
   }
</div>

#### Separate Filter Embed Script

import React from "react";
import ReactDOM from "react-dom"

<div>
    /*Place this code where you want filter to appear*/
    {
        window.VerbFilters({
            collectionId: "45b02e8e-cc63-401b-b691-fe669e955a58",
            React: React,
            ReactDOM: ReactDOM
        }))
   }
</div>

<!-- BREAK -->

import React from "react";
import ReactDOM from "react-dom"

<div>   
   /*Place this where you want verb dashboard to appear in your page*/
   {
       window.VerbDashboard({
            collectionId: "45b02e8e-cc63-401b-b691-fe669e955a58",
            React: React,
            ReactDOM: ReactDOM
        })
   }
</div>

#### Control Filter via SDK

import React from "react";
import ReactDOM from "react-dom"

<div>
   <button onClick={() => {
        // Set text filter named "{filter name here}"
        window.Verb.getDashboardByCollectionId("45b02e8e-cc63-401b-b691-fe669e955a58")
            .setFilterVal("27232985-f89f-44e4-8145-f7b42090be2c",
            {
                "$type": "TextFilterValue",
                "option": "FreeFormText",
                "freeFormValue": "AAA",
            }
        )         
   }}>    
      Set filter value      
   </button>
</div>

<!-- BREAK -->

import React from "react";
import ReactDOM from "react-dom"


function VerbApp(){
    let dashboardRef;
    
    const setFilterValueThroughRef = () => {
        // Set numeric filter named "{filter name here}"
        dashboardRef.setFilterVal(
            "78b91972-ba29-4fb3-a14e-3339568d76a7",
        {
            "$type": "NumericFilterValue",
            valueOrMin: 144,
        });
    }
    
    return (
        <div>
            <button onClick={setFilterValueThroughRef}>
                Set Filter Value Through Ref
            </button>
           {
               window.VerbDashboard({
                    collectionId: "45b02e8e-cc63-401b-b691-fe669e955a58",
                    React: React,
                    ReactDOM: ReactDOM,
                    ref: (dashboard) => dashboardRef = dashboard,
                })
           }
        </div>
    )
}

Angular
---

#### Scripts

<script src="https://app.verbdata.app/sdk/verb-sdk-angular.js"></script>

<script>
    window.VerbParams = {
        apiKey           : "31308c69-6a78-4501-a0dc-761be4ab08d3",
        version          : "v1.0",
        authParams       : {
            "btoken": "REPLACE_WITH_VALUE"
        },
    };
</script>

#### VerbDashboard Component

import {Component, Input, ViewChild} from '@angular/core';

@Component({
    selector: 'verb-dashboard',
    template: `<div #div>Loading Verb Dashboard...</div>`,
})
export class VerbDashboard {
    @ViewChild("div") el = null;
    @Input() params! : any;

    dashboardRef: any;

    ngAfterViewInit() {
        window["VerbDashboard"]({
            dom: this.el?.["nativeElement"],
            ...this.params,
            ref: (ref: any) => this.dashboardRef = ref,
        });
    }

    ngOnDestroy() {
        this.dashboardRef?.destroy();
    }
}

#### VerbFilters Component

import {Component, Input, ViewChild, ElementRef} from '@angular/core';

@Component({
    selector: "verb-filters",
    template: `<div #filter x-verb-filters="true" [attr.x-collection-id]="null"></div>`,
})

export class VerbFilters {
    @ViewChild("filter") el! :ElementRef ;
    @Input() params! : any;

    ngAfterViewInit() {
        const dom = this.el?.["nativeElement"];
        const collectionId = this.params.collectionId;

        dom?.setAttribute('x-collection-id', collectionId);

        window.Verb.getDashboardByCollectionId(collectionId)?.addFilterDom?.(dom);
    }

    ngOnDestroy() {

        const dom = this.el?.["nativeElement"];
        const collectionId = this.params.collectionId;

        window.Verb.getDashboardByCollectionId(collectionId)?.removeFilterDom?.(dom);
    }
}

#### Dashboard including filters

<verb-dashboard
    [params]='{
        collectionId: "45b02e8e-cc63-401b-b691-fe669e955a58",
    }'
></verb-dashboard>

#### Separate Filter Embed Script

/*Place this code where you want filter to appear*/
<verb-filters
    [params]='{
        collectionId: "45b02e8e-cc63-401b-b691-fe669e955a58"
    }'
></verb-filters>

/*Place this where you want verb dashboard to appear in your page*/
<verb-dashboard
    [params]='{
        collectionId: "45b02e8e-cc63-401b-b691-fe669e955a58",
    }'
></verb-dashboard>

#### Control Filter via SDK

import { Component, ElementRef, ViewChild } from '@angular/core';

@Component({
    selector: 'verb-app',
    template: `<div>
        <button
            (click)="setFilterVal()"
        >
            Set filter value
        </button>
        
        
        <button
            (click)="setFilterValThroughRef()"
        >
            Set filter value through ref
        </button>
        
        <verb-dashboard
            #dashboard
            [params]='{
                collectionId: "45b02e8e-cc63-401b-b691-fe669e955a58"
            }'
        ></verb-dashboard>
    </div>`
})

export class VerbApp {
    @ViewChild('dashboard') dashboard: ElementRef;

    setFilterValThroughRef() {
        // Set numeric filter named "{filter name here}"
        this.dashboard.dashboardRef.setFilterVal(
            "78b91972-ba29-4fb3-a14e-3339568d76a7",
            {
                "$type": "NumericFilterValue",
                valueOrMin: 144,
            }
        );
    }

    // Set text filter named "{filter name here}"
    setFilterVal() {
        window.Verb.getDashboardByCollectionId(
            "45b02e8e-cc63-401b-b691-fe669e955a58"
        ).setFilterVal(
            "27232985-f89f-44e4-8145-f7b42090be2c",
            {
                "$type": "TextFilterValue",
                "option": "FreeFormText",
                "freeFormValue": "AAA",
            }
        );
    }
}

Vue
---

#### Scripts

<script src="https://app.verbdata.app/sdk/verb-sdk-vue.js"></script>
<script>
    window.VerbParams = {
        apiKey           : "31308c69-6a78-4501-a0dc-761be4ab08d3",
        version          : "v1.0",
        authParams       : {
            "btoken": "REPLACE_WITH_VALUE"
        },
    };
</script>

#### VerbDashboard Component

<script>
    Vue.component('verb-dashboard', {
        props: ['params'],
        template: '<div>Loading Verb Dashboard...</div>',
        mounted() {
            window["VerbDashboard"]({
                dom: this.$el,
                ...this.params,
                ref: (ref) => this.dashboardRef = ref,
            });
        },
        beforeDestroy() {
            this.dashboardRef?.destroy();
        },
    });
</script>

#### VerbFilters Component

<script>
    Vue.component('verb-filters', {
        props: ['params'],
        template: '<div x-verb-filters="true"></div>',
        mounted() {
            const dom = this.$el;
            const {collectionId} = this.params;

            dom.setAttribute('x-collection-id', collectionId);
            
            window.Verb.getDashboardByCollectionId(collectionId)?.addFilterDom?.(dom);
        },
        
        beforeDestroy() {

            const dom = this.$el;
            const {collectionId} = this.params;

            window.Verb.getDashboardByCollectionId(collectionId)?.removeFilterDom?.(dom);
        },
    });
</script>

#### Dashboard including filters

<script>
    new Vue({
        el: '#root',
        template: `
            /*Place this code where you want dashboard to appear*/
            <verb-dashboard
                v-bind:params='{
                    collectionId: "45b02e8e-cc63-401b-b691-fe669e955a58",
                }'
            />
        `
    });
</script>

#### Separate Filter Embed Script

<script>
    new Vue({
        el: '#root',
        template: `
            /*Place this code where you want dashboard to appear*/
            <verb-dashboard
                v-bind:params='{
                    collectionId: "45b02e8e-cc63-401b-b691-fe669e955a58",
                }'
            />
        `
    });
</script>

<!-- BREAK -->

<script>
    new Vue({
        el: '#root',
        template: `
            /*Place this code where you want filter to appear*/
            <verb-filters
                v-bind:params='{
                    collectionId: "45b02e8e-cc63-401b-b691-fe669e955a58",
              }'
            />
        `
    });
</script>

#### Control Filter via SDK

<script>
    new Vue({
        el: '#root',
        data: {
            setFilterVal: () => {
                // Set numeric filter named "{filter name here}"
                window.Verb.getDashboardByCollectionId(
                    "b1fc8fce-e524-4013-9bbf-dff91a0f2515"
                ).setFilterVal(
                    "78b91972-ba29-4fb3-a14e-3339568d76a7",
                    {
                        "$type": "NumericFilterValue",
                        valueOrMin: 234,
                    }
                );
            }
        },
        methods: {
            setFilterValThroughRef() {
                // Set numeric filter named "{filter name here}"
                this.$refs.dashboard.dashboardRef(
                    "78b91972-ba29-4fb3-a14e-3339568d76a7",
                    {
                        "$type": "NumericFilterValue",
                        valueOrMin: 144,
                    }
                );
            }
        },
        template: `
            <div>
                <button v-on:click="setFilterVal">Set Filter Value</button>
                
                <button v-on:click="setFilterValThroughRef">Set Filter Value through ef</button>
                
                <verb-dashboard
                    ref="dashboard"
                    v-bind:params='{
                        collectionId: "b1fc8fce-e524-4013-9bbf-dff91a0f2515",
                    }'
                />
            </div>
        `
    });
</script>