Solved

Anchor to On Page Widget


Userlevel 1
Badge

The self-service aspect of the Yotpo on-page review widget is great, but can anyone suggest a way to help with this use case: customer service asks a customer to leave a review for a product they have and in this request give the customer as few steps as possible to complete the task.

I was thinking an anchor link (not supported according to Yotpo live chat). Any other suggestions?

icon

Best answer by lindsay.delorenzo 18 October 2022, 20:18

View original

6 replies

Userlevel 4
Badge +3

@Kristie from Yotpo @erikakwee any thoughts about this one? :)

Very interested in this as well. Many times we hear from a customer who disregarded the auto-generated email and wants to leave a review. We want to send them a simple link they can click on at that moment to leave their review while it’s still on their mind.

Userlevel 3
Badge +3

Hi there! For this use case, I’d recommend sending a customer a manual review request. This should be an easy flow for customer service or any team to follow to trigger a review request to a specific customer on demand.

More details on sending a manual review request can be found here: https://support.yotpo.com/en/article/manual-review-requests

The problem with that is if the email was sent recently, the system won’t send out the manual request. I tried this. The problem is you have to wait until x number of days have passed. It’s too hard to keep a customer’s attention and as a result I’m missing out on a lot of reviews.

I don’t even see the place in the reviews section on my website (Shopify) where they can supposedly add a review. Maybe I have it configured wrong.

Userlevel 1
Badge

Solved: Yotpo support added an ID snippet titled “write-review” that we appended to our product URLs. For example: https://fablepets.com/products/the-game#write-review

This worked on desktop and Android mobile devices, but not on iOS. We ended up using our development agency to find a workaround for the iOS bug, which at this time is still unresolved.

So long story short, the ID snippet can be added, but likely will not work as expected and you will need to use development hours to fix it.

image.png

In web development, "anchor to on-page widget" refers to creating a hyperlink that allows users to navigate to a specific section or widget within the same webpage without reloading the entire page. This technique is often used to improve user experience and help users find relevant content quickly.

To create an anchor to an on-page widget, follow these steps:

  1. Add an ID to the Widget: In the HTML code of your webpage, identify the section or widget to which you want to anchor. Add a unique ID attribute to that section or widget using the id attribute. For example:

     

    htmlCopy code

    <div id="widget1"> <!-- Your widget content here --> </div>

  2. Create the Anchor Link: Next, create a hyperlink (anchor link resultados del tris) that will take users to the widget within the same page. To do this, use the a (anchor) tag and set the href attribute to include the ID of the widget preceded by a hash (#) symbol. For example:

     

    htmlCopy code

    <a href="#widget1">Go to Widget 1</a>

    When users click on this link, it will scroll to the widget with the ID "widget1" within the page.

  3. Style the Link (Optional): You can apply custom CSS styles to the anchor link to make it visually stand out or blend seamlessly with your page design.

Example: Here's a complete example of how the anchor link is used:

 

htmlCopy code

<!DOCTYPE html> <html> <head> <title>Anchor to On-Page Widget Example</title> </head> <body> <h1>Welcome to My Webpage</h1> <p> This is some introductory text. Scroll down to see the widgets. </p> <div id="widget1"> <h2>Widget 1</h2> <p> This is the content of Widget 1. </p> </div> <div id="widget2"> <h2>Widget 2</h2> <p> This is the content of Widget 2. </p> </div> <div id="widget3"> <h2>Widget 3</h2> <p> This is the content of Widget 3. </p> </div> <!-- Anchor Links --> <p><a href="#widget1">Go to Widget 1</a></p> <p><a href="#widget2">Go to Widget 2</a></p> <p><a href="#widget3">Go to Widget 3</a></p> </body> </html>

When users click on the "Go to Widget" links, the page will smoothly scroll to the respective widget without reloading the entire page, providing a seamless navigation experience.

 

 

 

Regenerate

Reply