Back to guides

UserWay’s Custom Trigger

AudioVisual
Hi everyone!Woman wearing a UserWay shirt is speaking, her video is in a small box in the left corner of the screen. This box remains throughout the video.

A website appears in the main screen showing a site with the title “Presidio of San Francisco.” On the website is the image of several iconic San Francisco homes.

In this tutorial, I’m going to show you how to enable a custom trigger to open UserWay accessibility menu.The image does not change.
This means that the default UserWay button will disappear. And you can use an element on your site that will trigger the opening of the menu. Your custom trigger should be visible in the header. And it can be any HTML element like a link, an image, or a list.A cursor appears with a yellow circle around it.
So first, let’s go into widget settings by clicking on ‘Manage.’The cursor moves to the upper-right corner of the screen and clicks on the UserWay widget. The widget menu appears, and the cursor moves to the bottom of the menu where there is a blue Manage link. The cursor clicks on this link.
And then Custom Trigger.The cursor moves down to the ‘Custom Trigger’ link and clicks on it.
Right now this option is disabled. So to enable it just click on the button.The custom trigger menu opens. The enable custom trigger button is in the ‘off’ position. The cursor clicks on the button.
When it’s green it means it’s active.The button turns green, indicating that the custom trigger option is enabled.
In the header of this site we’ve added two HTML elements. This image on the left and this text block on the right. I’m going to show you how to set these two elements as your custom trigger.The cursor moves to hover over an accessibility icon in the upper-left corner of the screen. The cursor then moves to hover over text that reads “Accessibility Menu” on the top navigation. The cursor briefly moves across the page and back.
You will need the ID or class value of these elements. You can find these values in your HTML files.The image does not change.
First I’ll start with the text.The cursor hovers over the words “Accessibility Menu” and then moves to the bottom of the screen.
So I’m going to check the code.A new window appears filled with computer code.
Here’s a text block.The cursor highlights a line of text in Brown and blue highlights.
And I’m going to copy the class value. So you should copy whatever is between the quotation marks.The cursor hovers over the word “class.” It then highlights the text in quotation marks after the word class.
That’s the class name. So copy it.The image does not change.
And now let’s go back to our site to enter the class.The “Presidio of San Francisco” website reappears with the custom trigger menu open.
The cursor appears in the space under text that says “Enter a custom ID value.”
Just remember that if you add a class value, you should enter a period followed by the class name. Just like this.A period is typed in the space and then the copied text from the code is pasted after the period.
Click on ‘Save.’The cursor moves down to the blue ‘Save’ button.
And also refresh your site to make the changes available.The Custom Trigger menu refreshes with a green bar that reads “Settings have been changed successfully.” The site refreshes and the menu closes.
Site is done refreshing. And you can see that the UserWay default button has disappeared.The cursor hovers over where the UserWay widget button used to be – the space is now empty.
And if you click on accessibility menu this text block the menu pops up.The cursor moves to the “Accessibility Menu” text and clicks on it. The UserWay feature menu appears.
Now let’s go back to custom trigger settings. And we’re going to do the same thing with an image.The cursor moves down to the ‘Manage’ link and clicks on it. The widget settings menu appears and the cursor clicks on the ‘Custom Trigger’ link.
The custom trigger menu opens.
So let’s go back to check the code.The code page opens again.
This is the image and we have an ID value and a class value. I’m going to grab the ID value.The cursor highlights a line of code in brown and blue.
So same thing. You should copy the name that’s in between the quotation marks.The cursor highlights text after the word ‘id.’
So copy it.The text is copied and the cursor moves down the page.
Let’s go back to our site and paste the value. IDs don’t need to be prefaced by a period.The code page disappears and the “Presidio of San Francisco” website reappears with the custom trigger menu open. The existing text is highlighted and deleted.
So just paste the value.The newly copied text is pasted.
Click on ‘Save.’The cursor moves to click on the blue ‘Save’ button.
And also refresh your site to make the changes available.The site refreshes and the widget menu closes.
So if I click on the text box nothing triggers.The cursor clicks on the “Accessibility Menu” text and nothing happens.
Now let’s click on the image.The cursor clicks on the accessibility image in the left corner of the screen.
And the menu pops up.The widget accessibility menu appears on the right of the screen.
If the default UserWay widget appears that means that you haven’t specified the ID or class value correctly. So double-check and make sure you’re entering the right ID or class name. And again remember that if you enter a class value you should write a period followed by the class name.The image does not change
And to disable this option go back to the widget settings.The cursor moves back to the ‘Manage’ link and clicks on it. The widget settings menu appears.
Click on ‘custom trigger’.The cursor moves down to the ‘Custom Trigger’ link and clicks on it. The custom trigger menu appears.
And then click on the button.The cursor clicks on the button and it changes from green to gray.
Click on ‘Save.’The cursor moves to the ‘Save’ button and clicks on it.
And custom trigger is disabled.The menu refreshes and the words “Settings have been changed successfully” appear in green at the top.
To learn how to customize your widget’s look and feel, enable white label, agency mode, and other upgrades check out the links in the description below.The website fades away and the woman speaking becomes the main image.
Also, don’t forget to subscribe!The woman finishes speaking and the video fades to black.

Explore UserWay’s Accessibility Widget