1. Home
  2. Docs
  3. Tutorials
  4. Use Web2API to deliver content from your website to your Alexa Skill

Use Web2API to deliver content from your website to your Alexa Skill

You can use the Web2API module to scrape content from your website, and easily deliver to the users of your Alexa Skill. We will demonstrate in this tutorial how to deliver Wikipedia FAQ page.

Select topics

Let’s select first the topics we want to support (all the “How do I” topics):

  • Edit a page
  • Create a new page
  • Change the name of an article
  • Change my username
  • Delete my account
  • Cite Wikipedia
  • Contact Wikipedia

Notice – We have to have a list of topics we want to support in advance.

Configure the interaction module

Now we will configure the needed conversation. First, create a new entity named HOW_TO_ITEMS. Add all the selected topics as entity values.

Howto topics entity

Then add a new intent named Howto. Use an entity with name Item with the type HOW_TO_ITEMS. Add the sample “How do I {Item}”.

Use a Text hard-coded response “This is my answer”. Don’t worry, we will change it later.

Update your Alexa Skill configuration

Click “Publish Alexa Skill”  button and skip to stage #4 Interaction Model. Copy and paste the Intent Schema, the HOW_TO_ITEMS slot, and its values, and the Sample Utterances. Click save and wait until the process is finished. Now you can test your new intent. Go ahead and say

Alexa ask My Bank how do I open a new page

Alexa should respond with your hard-coded text “This is my answer”

Use Web2API to scrape data from your website

Add the following code to the API tab

  1. Lines 1-3 Web2API initialize code
  2. Line 8 – load the page https://en.wikipedia.org/wiki/Wikipedia:FAQ
  3. Line 11 – Run the code inside the page, send the argument “topic” (line 28)
  4. Line 12-27 – Run inside the page, look for a headline with the topic text, return the text of the next elements.
function web2APIinit(web2APImanager) {
    web2APImanager.setActionHandler(myHowtoHandler);
}

var myHowtoHandler = function(action, web2APImanager, url) {
    var req = web2APImanager.getRequest();
    if (url === "") {
        web2APImanager.loadPage("https://en.wikipedia.org/wiki/Wikipedia:FAQ");
    } else if (url === "https://en.wikipedia.org/wiki/Wikipedia:FAQ") {
        var res = new Object();
        res.value = web2APImanager.page.evaluate(function(topic) {
            try {
                var topicText = "";
                $('.mw-headline').each(function() {
                    var text = $(this).text().toLowerCase();
                    if (text.indexOf(topic) != -1) {
                        $(this).parent().nextUntil('h2,p').each(function() {
                            topicText += $(this).text() + " ";
                        });
                    }
                });
                topicText = topicText.replace(/(?:\r\n|\r|\n)/g, ' ');
                topicText = topicText.replace(/\ \ /g, ' ');
                return topicText;
            } catch (err) {
                return "";
            }
        }, req.arguments.topic.toLowerCase());
        web2APImanager.setResponseData(res);
        web2APImanager.close();
    }
}

You can test your new API using the API simulator. Inside the request box, change the action to “myHowtoHandler” and add the topic parameter to the arguments object “topic”:”edit a page”. Now click run and you should receive an answer with text.

{
  "status": true,
  "error": "",
  "response": {
    "value": "Main page: Wikipedia:Contributing to Wikipedia Editing most Wikipedia pages is easy, just click the \"Edit\" tab at the top of a Wikipedia page (or on a section-edit link). This will take you to a new page with a text box containing the editable text of the page you were viewing. In this box you can type in the text that you want to add using wiki markup to format the text and add other elements like images and tables. When you have finished editing you should write a short edit summary in the small field below the edit-box describing your changes. "
  }
}

Create your intent business logic

Now we will connect the two edges, the conversation, and our new backend API, using a business logic function.

  • Lines 1-5: Get the Item entity
  • Lines 7-11: Prepare a web2api call
function Howto(context, req, res) {
    if (!req.slot("Item")) {
        res.say('<say-as interpret-as="interjection">whoops a daisy</say-as>, Something went wrong');
        return;
    }
    var item = req.slot("Item");

    var web2Api = context.web2Api;
    var action = 'myHowtoHandler';
    var args = {
        "topic": item
    };
    return web2Api.sendRequest(action, args)
        .then(function(data) {
            console.log(JSON.stringify(data));
            if (!data || !data.response || !data.response.value || data.response.value === "") {
                res.say('<say-as interpret-as="interjection">whoops a daisy</say-as>, Something went wrong');
                return;
            }
            res.say(data.response.value);
        }).catch(function(err) {
            console.log(err);
            res.say('<say-as interpret-as="interjection">whoops a daisy</say-as>, Something went wrong');
        });
}

Remember the hard-coded textual response? Go back to the interaction module, open the “Howto” intent, change the response type to “From Code”, and enter the code

return Howto(context, req, res);

Test your new intent

That’s it! Your new intent is ready for testing. Try different variations to make sure you have enough samples for high-quality results.

Need help?

Feel free to contact us, we are happy to help and answer any question you may have.

Was this article helpful to you? Yes 2 No 1

How can we help?