Scripting Hints

Adding Hints is a great way to teach users how to interact with your Lens. Common Hints include "Open Your Mouth", "Look Around", "Try Rear Camera" and more. A single hint can be easily added to a Lens by setting the Main Hint in the Project Info window. This is explained in the Lens Hints guide. This only works if you want to show a single hint at the beginning of the Lens. For more complex hint use (like multiple hints or showing a hint on trigger), you need to script the hint. This guide first walks through an importable helper script used for showing hints that's tuned in the Inspector panel. It then walks through how you can script Hints on your own for even more complex use cases.

Adding the Hints Package

Add the Hints package to your project by following these steps.

1. Download the Lens Hints package
2. Unzip the downloaded package
3. Open your project in Lens Studio
4. Drag and drop the Lens Hints [EDIT_ME].lso ( just downloaded ) into the Objects panel
5. You should see the Lens Hints [EDIT_ME] object appear in your Objects panel

Now you can add Hints to your Lens!

Adding Hints

The Lens Hints package you just downloaded has two Hints added. In the Inspector panel, you will see two Script Components under the Lens Hints [EDIT_ME] Object. The ShowHints.js is bound to a specific Event. The Hint will be displayed when the event is called.

For example, in this case, "Open Your Mouth" will be displayed with user switches to the front camera.

You can add more Hints by adding a Script Component and selecting ShowHints.js in the Scripts folder in the Resources panel. Alternatively, you can also drag and drop the ShowHint.js from the Resources Panel to the Inspector Panel.

You will not see the actual Hint message in Lens Studio. The Hint will only appear when you preview your Lens on your device. For debugging hints in Lens Studio, a print statement like "Showing Hint: lens_hint_open_your_mouth" will be displayed in the Logger panel.

Hint Settings

The ShowHints.js script has a number of settings that can be configured in the Inspector panel.

• Hint Id: The hint to show. A drop down of all available hints
• Show Time: The number of seconds that the hint message will be displayed
• Delay Time: The number of seconds to wait before showing the hint after the Event is triggered
• Show Once: If enabled, the hint will only show once. If not, the hint will be displayed every time the Event gets triggered

Hints will continue to display when users are recording snaps. However, in the resulting Snap, the hint message will not be visible

``

Script Your Own Hints

You can also script your own Hints directly instead of using the above package. For hints to work, you need to first create a Hints Component in Script.

var hintComponent = script
  .getSceneObject()
  .createComponent('Component.HintsComponent');

You can control the Hints Component by using the methods showHint(hintID, showDuration) and hideHint(hintID). HintID is an ID that references a specific Hint string. Here is a list of supported HintIDs:

lens_hint_aim_camera_at_the_sky;
lens_hint_blow_a_kiss;
lens_hint_blow_a_kiss_voice_changer;
lens_hint_come_closer;
lens_hint_do_not_smile;
lens_hint_do_not_try_with_a_friend;
lens_hint_draw_with_your_finger;
lens_hint_find_face;
lens_hint_find_image;
lens_hint_find_marker;
lens_hint_find_snapcode;
lens_hint_kiss;
lens_hint_kiss_again;
lens_hint_look_around;
lens_hint_look_down;
lens_hint_look_left;
lens_hint_look_right;
lens_hint_look_up;
lens_hint_make_some_noise;
lens_hint_move_your_head;
lens_hint_nod_your_head;
lens_hint_now_kiss;
lens_hint_now_open_your_mouth;
lens_hint_now_raise_your_eyebrows;
lens_hint_now_smile;
lens_hint_open_your_mouth;
lens_hint_open_your_mouth_again;
lens_hint_open_your_mouth_voice_changer;
lens_hint_pick_a_face;
lens_hint_pick_a_photo;
lens_hint_pick_an_image;
lens_hint_raise_your_eyebrows;
lens_hint_raise_your_eyebrows_again;
lens_hint_raise_eyebrows_or_open_mouth;
lens_hint_raise_your_eyebrows_voice_changer;
lens_hint_rotate_your_phone;
lens_hint_say_something;
lens_hint_smile;
lens_hint_smile_again;
lens_hint_smile_voice_changer;
lens_hint_swap_camera;
lens_hint_tap_a_surface;
lens_hint_tap_ground_to_place;
lens_hint_tap_surface_to_place;
lens_hint_tap_ground;
lens_hint_tap;
lens_hint_tilt_your_head;
lens_hint_try_friend;
lens_hint_try_rear_camera;
lens_hint_turn_around;
lens_hint_voice_changer;
lens_hint_walk_through_the_door;

Example of Scripting Hints:

hintComponent.showHint('lens_hint_tap', 3);
hintComponent.hideHint('lens_hint_tap');