Changing the Color of CTA Button

The color of CTA button can be modified as shown below. To change the shape of the CtaView, please refer to here.

	Default Color
	Modified Color

Adding the following color resource values to the colors.xml of the project changes the color of CTA button. (Note: This will affect the color of CTA button for BuzzAd Benefit as well.)

benefit_native_bg_cta_button_normal When the CTA button is exposed
benefit_native_bg_cta_button_pressed When the CTA button is clicked
benefit_native_bg_cta_button_disabled When the CTA button is disabled

<resources>
    ...
    <color name="benefit_native_bg_cta_button_normal">#1290FF</color>
    <color name="benefit_native_bg_cta_button_pressed">#0072E1</color>
    <color name="benefit_native_bg_cta_button_disabled">#DDDEDF</color>
</resources>

CustomPreviewMessage

CustomPreviewMessage allows frequency capping with CustomPreviewConfig stored on the server and shows PreviewMessage every 6 hours. Therefore, setting CustomPreviewConfig on the server must be preceded.

CustomPreviewMessageConfig consists of the following information:

{
  "id": 5,
  "unit_id": 1234567890,
  "message": "Play the arcade game today and receive up to 90P!",
  "landing_url": "deeplink://landing?activity=arcade",
  "start_date": "2020-03-01T00:00:00Z",
  "end_date": "2020-03-31T23:59:59Z",
  "start_hour_minute": "21:00",
  "end_hour_minute": "23:00",
  "dipu": 2,
  "tipu": 60,
  "dcpu": 1,
  "tcpu": 30,
  "icon": "http://imagelocation/arcade_icon.png"
}

Name	Description

Name	Description
`id`	configId (messageId), automatically assigned by the server
`unit_id`	pop unitId
`landing_url`	Landing URL or deeplink
`start_date`	config start date (UTC, time is ignored)
`end_date`	config end date (UTC, time is ignored)
`start_hour_minute`	config start time (minutes are ignored)
`end_hour_minute`	config end time (minutes are ignored)
`dipu`	Frequency capping: daily impression per user
`tipu`	Frequency capping: total impression per user
`dcpu`	Frequency capping: daily click per user
`tcpu`	Frequency capping: total click per user
`icon`	icon url

CustomPreviewMessage is displayed in two areas:

Pop's CustomPreviewMessage (Figure 1)
- Frequency capping is implemented according to DIPU, TIPU, DCPU, TCPU within the set period and time.
- CustomPreviewMessage has a priority over AdPreview and ArticlePreview.
PopFeedHeader’s CustomPreviewMessage (Figure 2)
- CustomPreviewMessage is shown within the set period and time without frequency capping.
- FeedConfig can be customized.
- If header is not set in FeedConfig, CustomPreviewMessage can be set to be invisible.

Figure 1. CustomPreviewMessage displayed in Pop

Figure 2. CustomPreviewMessage displayed in PopFeedHeader

Step 1. (Optional) Customizing the PopFeedHeader

Create a CustomPopHeaderViewAdapter by inheriting DefaultPopHeaderViewAdapter.
Override getMessagePreviewLayout.
MessagePreviewLayout parameter MessagePreview contains message, landingUrl, and iconUrl information.
Based on the information received from step 3 (line 9~17), you can directly configure the layout and process clickEvent.
Set CustomPopHeaderViewAdapter created in step 1 through FeedConfig.feedHeaderViewAdapterClass (line 24).
Set the FeedConfig set in step 5 through PopConfig.feedConfig (line 29).

public class CustomPopHeaderViewAdapter extends DefaultPopHeaderViewAdapter {
    @Nullable
    @Override
    protected View getMessagePreviewLayout(Context context, ViewGroup parent, MessagePreview messagePreview) {
        final LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        if (inflater == null) {
            return null;
        }
        View viewMessagePreview = inflater.inflate(R.layout.view_custom_preview_message, parent, false);
        final TextView messagePreviewText = viewMessagePreview.findViewById(R.id.textCustomPreviewMessageTitle);
        messagePreviewText.setText(messagePreview.getMessage());
        viewMessagePreview.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                startDeeplinkActivity(context, messagePreview.getLandingUrl());
            }
        });
        return viewMessagePreview;
    }
}

final FeedConfig popFeedConfig = new FeedConfig.Builder(getApplicationContext(), UNIT_ID_POP)
        ...
        .feedHeaderViewAdapterClass(CustomPopHeaderViewAdapter.class)
        ...
        .build();
final PopConfig popConfig = new PopConfig.Builder(getApplicationContext(), UNIT_ID_POP)
        ...
        .feedConfig(popFeedConfig)
        ...
        .build();

Step 2. (Optional) Configuring the FeedConfig

- Making the CustomPreviewMessage invisible in PopFeedHeader

If you do not set FeedConfig.feedHeaderViewAdapterClass when PopConfig.feedConfig is set, you can set CustomPreviewMessage of PopFeedHeader invisible.

- Configuring PopFeedHeader to display DefaultPreviewMessage

When setting PopConfig.feedConfig, if you set FeedConfig.feedHeaderViewAdapterClass(DefaultPopHeaderViewAdapter.class), you can use the default PreviewMessage provided. (See Figure 2)

Step 3. (Optional) Configuring the Preview Interval

Set Preview interval through PopConfig.previewIntervalInMillis. The interval is set equally to AdPreview, ContentPreview/CustomPreviewMessage.

PopConfig Advanced

PopAdMessageViewClass

If there is no advertisement, PopAdMessageViewClass is used to show the preview. It shows the title of the first article and after how many seconds it closes. The class must be created by inhertingPopAdMessageView. The following methods can be overridden.

updateView: It is called every time the speech bubble gets updated. The remaining seconds and the title of the article are passed as arguments.
getDurationInSeconds Returns the duration of which the speech bubble will last. 5 seconds is recommended.

Implementation

PopArticleMessageViewClass

If there is no advertisement, PopArticleMessageViewClass is used to show the preview. It shows the title of the first article and after how many seconds it closes. The class must be created by inhertingPopArticleMessageView. The following methods can be overridden.

updateView: It is called every time the speech bubble gets updated. The remaining seconds and the title of the article are passed as arguments.
getDurationInSeconds: Returns the duration of which the speech bubble will last. 5 seconds is recommended.
getNativeArticleView: Returns an instance of the NativeArticleView. NativeArticleView inherits LinearLayout to handle Impressions and Clicks. Set the view of the PopArticleMessageViewClass as follows.

Implementation

PopUtilityLayoutHandlerClass

The UI of Utility screen can be customized with PopUtilityLayoutHandler. The default displays the camera, browser and photo. Extend PopUtilityLayoutHandler class and override the method below.

onLayoutCreated(ViewGroup parent): After creating the view to be used in Utility, add the view to the parent view group. Attach a click listener to the icon in the custom view to work with it.

Icon spec for Utility UI
- 24*24 dp (mdpi) up to 96*96 px (xxxhdpi)
- Icons can either be black and white or color.
- Both PNG and vector images are supported.

Implementation

Buzzvil Developer Guides

UI Customization (BuzzAd Pop)

Changing the Color of CTA Button

CustomPreviewMessage

Step 1. (Optional) Customizing the PopFeedHeader

Step 2. (Optional) Configuring the FeedConfig

- Making the CustomPreviewMessage invisible in PopFeedHeader

- Configuring PopFeedHeader to display DefaultPreviewMessage

Step 3. (Optional) Configuring the Preview Interval

PopConfig Advanced

PopAdMessageViewClass

PopArticleMessageViewClass

PopUtilityLayoutHandlerClass