Enabling Widget Tag UI for Quiz, Poll, and Predictions

A guide on how to enable UI to allow users to easily differentiate between Quiz, Polls, and Prediction Widgets

Guide

📘
These are the steps required to achieve the "After" design. You will likely need to make additional changes to match your specific customization.

By default, the copy for the tag is blank. You need to add your own copy via localization.

// In a Localizable.strings file add the widget tag copy for the following localization keys

"EngagementSDK.widget.quiz.tag" = "QUIZ";
"EngagementSDK.widget.poll.tag" = "POLL";
"EngagementSDK.widget.prediction.tag" = "PREDICT";
"EngagementSDK.widget.followup.tag" = "FOLLOW UP";

// Add the widget tag for the following localization keys in either LiveLike.init method's localizedStrings argument, or the LiveLike.applyLocalization method.

"widget.quiz.tag": "QUIZ";
"widget.poll.tag": "POLL";
"widget.prediction.tag": "PREDICT";
"widget.followup.tag": "FOLLOW UP";

// In the strings file add the widget tag copy for the following localization keys
    <string name="livelike_poll_tag">POLL</string>
    <string name="livelike_quiz_tag">QUIZ</string>
    <string name="livelike_prediction_tag">PREDICT</string>
    <string name="livelike_follow_up_tag">FOLLOW UP</string>

Apply the following theme customizations

let theme = Theme()
theme.widgetTagMargins = UIEdgeInsets(top: 10, left: 16, bottom: 0, right: 0)
theme.choiceWidgetTitleMargins = UIEdgeInsets(top: 0, left: 16, bottom: -10, right: 0)
let titleFont: UIFont = .systemFont(ofSize: 16, weight: .bold)
theme.widgets.poll.title.font = titleFont
theme.widgets.quiz.title.font = titleFont
theme.widgets.prediction.title.font = titleFont

Updated about 1 month ago