Customizing Search Component

Search Component is where users can search for stickers with search tags like happy, sad, what!, and more and find stickers they can send on chat. You can think of it like the GIF search engine, but optimized for stickers. The sticker search engine will get you the best results from 150,000+ stickers. By adding a single line of code, you'll be able to add this feature to your app, and customize the UI to make it better.

Before you begin

Make sure you went through all processes in Before You Begin to sign up for stipop dashborad and get API Key, which is reuiqred to complete development of the SDK.

apikey : Stipop API key for your app.
userId : Unique value for every user to distinguish unique users. The userId can be a string of any format.

React

Copy

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { SearchComponent } from 'stipop-react-sdk'

const App = () => {
  return (
    <SearchComponent 
      params={{
        apikey: 'apikey',
        userId: 'userId',
      }}
    />
  )
}

export default App

Next.js

Copy

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import dynamic from 'next/dynamic'

const SearchComponent = dynamic(
  () => import('stipop-react-sdk/dist/SearchComponent'),
  {
    ssr: false,
  })
  
const App = () => {
  return (
    <SearchComponent 
      params={{
        apikey: 'apikey',
        userId: 'userId',
      }}
    />
  )
}

export default App

Was this page helpful?

We’re here to help. Contact us.