Stipop Docs | Documentation for SDK and API

Search View

Search View 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.

Components

Users can use the 3 main components within the Search View to browse stickers for instant usage:

• Search Bar: Enter search tags to search for stickers.
• Recommended Tag: Click on a recommended tag for quicker use.
• Results window: Tap on a sticker to send it to chat.

Search View

Before you begin

Make sure you went through all processes in Quick Start to download and setup the Stipop.plist file, which is required to complete development of the SDK.

1. Make a UIView Object on Storyboard

Go to the Storyboard or Xib you want to place the Search View. Make an object and link it with @IBOutlet like video below.

2. Set SPUISearchViewController

Now, make SPUISearchViewController and connect to the searchView you've just made.

ViewController.swift
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
import UIKit
import Stipop

class ViewController: UIViewController {
    
    let searchViewController = SPUISearchViewController()
    @IBOutlet weak var searchView: UIView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        self.addChild(searchViewController)
        self.searchView.addSubview(searchViewController.view)
        
        searchViewController.delegate = self
        searchViewController.view.frame = self.searchView.bounds
        searchViewController.view.autoresizingMask = [.flexibleWidth, .flexibleHeight]
    }
}

extension ViewController: SPDelegate {
    var user: SPUser {
        return SPUser(userID: "some_user_id")
    }
    
    func onStickerSelect(_ sticker: SPSticker) {
        // This function will be executed when user chooses a sticker.
    }
}

3. How to Show Sticker Image

Refer Quick Implementation - 3. How to Show Sticker Image

ViewController.swift
1
2
3
func onStickerSelect(_ sticker: SPSticker) {
    stickerView.setSticker(sticker)
}

4. Done

Search View Controller

Wonderful! Now, you can implement Search View in your app.


Next step: Try out Sticker Picker View too

Now that you've got the Search View done, how about checking out Sticker Picker View?

We’re here to help. Contact us.