在Alexa技能中用tellWithCard在Echo Spot展示旅行信息遇模板报错

Hey Neil, let's get that travel cost skill working smoothly on your Echo Spot. The error you're seeing boils down to compatibility between the standard tellWithCard command and the Echo Spot's small, round screen—here's how to fix it:

Why This Happens #

tellWithCard generates a Standard Card, which is built for voice-only devices or larger screens. The Echo Spot's compact display doesn't natively support this default card template, hence the "template not available" error. You need to swap it for a screen-optimized template tailored to the Spot's form factor.

Step-by-Step Solution #

1. Switch to Screen-Adaptive Responses #

Instead of relying on tellWithCard, use Alexa's display directives to build a template that works on the Echo Spot. We'll use BodyTemplate2 (ideal for showing a title + detailed text) and add a fallback for voice-only devices.

2. Updated Code Example #

Here's how to modify your TravelCosts function to work with the Echo Spot, using your existing skillData:

const skillData = [
  { 
    country: "FRANCE", 
    costs: "$175 is the average daily price for travelling in France. The average price of food for one day is $36. The average price of a hotel for a couple is $206" 
  },
  { 
    country: "SPAIN",
    costs: // Add your Spain cost data here
  }
  // Add other countries as needed
];

const TravelCosts = async (handlerInput) => {
  // Fetch relevant country data (adjust this to match your intent logic)
  const intent = handlerInput.requestEnvelope.request.intent;
  const countryName = intent.slots.Country.value.toUpperCase();
  const countryData = skillData.find(item => item.country === countryName);
  
  if (!countryData) {
    return handlerInput.responseBuilder
      .speak("Sorry, I don't have travel cost data for that country.")
      .getResponse();
  }

  const speechText = countryData.costs;
  const responseBuilder = handlerInput.responseBuilder;

  // Check if the device supports screen display (like Echo Spot)
  const supportsDisplay = 
    handlerInput.requestContext?.System?.device?.supportedInterfaces?.Display;

  if (supportsDisplay) {
    // Build a BodyTemplate2 optimized for Echo Spot's screen
    const displayTemplate = {
      type: "BodyTemplate2",
      token: "travel-cost-template",
      backButton: "HIDDEN",
      title: `Travel Costs: ${countryName}`,
      textContent: {
        primaryText: {
          type: "RichText",
          text: speechText.replace(/\./g, ".<br>") // Add line breaks for readability
        }
      }
    };

    return responseBuilder
      .speak(speechText)
      .addRenderTemplateDirective(displayTemplate)
      .getResponse();
  } else {
    // Fallback for voice-only devices (original tellWithCard behavior)
    return responseBuilder
      .tellWithCard(speechText, `Travel Costs: ${countryName}`, speechText)
      .getResponse();
  }
};

3. Enable Display Interface in Developer Console #

Before testing, make sure you've turned on the Display interface for your skill:

• Go to the Alexa Developer Console
• Select your skill → Build → Interfaces
• Toggle on the Display option and save changes

Quick Tips for Echo Spot Optimization #

• Keep text scannable: The Spot's screen is small, so add line breaks (like in the example) to avoid wall-of-text issues
• Stick to supported RichText tags: Only use <b>, <i>, <br>—other HTML won't render
• Test with the Echo Spot simulator: Use the Alexa Developer Console's test tab to switch to the Echo Spot device and preview your template

That should resolve the template error and show your travel cost info perfectly on the Echo Spot's screen!

内容的提问来源于stack exchange，提问作者Neil