zplata

Elevenlabs <> Webflow MCP Conversational AI integration

This is the prompt used in the video. Additionally I gave Cursor context from the docs page here: https://elevenlabs.io/docs/agents-platform/guides/no-code/webflow

Let's add the ElevenLabs ConversationalAI widget to my Webflow site. Reference the docs in context if needed.

Add a custom DOM element with the custom attributes for the HTML element in the snippet below. Then for the script tag, first create a new custom code script that will dynamically inject the ElevenLabs CDN code into the end of my body tag of the site.

zplata

void onRiveInit(Artboard artboard) {

  (artboard.fills.first.children[0] as SolidColor).colorValue = const Color(0xFFFF0000).value;
  // or iterate artboard.children to find the node you need
  
}

zplata

// Welcome to Code in Framer
// Get Started: https://www.framer.com/docs/guides/
import { useEffect, useState } from "react"
import clsx from "clsx"
import { useRive } from "@rive-app/react-canvas"
import { addPropertyControls, ControlType, RenderTarget } from "framer"
import { useStore } from "https://framerusercontent.com/modules/CC60PUwODsxklgzxWaQ9/lZn3h1Ist6Zw4javV5si/state.js"

import _ from "@rive-app/react-canvas"
import RiveComponent, {

zplata

class SpeedyAnimation extends StatelessWidget {
  const SpeedyAnimation({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Custom Controller'),
      ),
      body: Center(

zplata

/// Demonstrates playing a one-shot animation on demand

import 'package:flutter/material.dart';
import 'package:rive/rive.dart';

class PlayOneShotAnimation extends StatefulWidget {
  const PlayOneShotAnimation({Key? key}) : super(key: key);

  @override
  _PlayOneShotAnimationState createState() => _PlayOneShotAnimationState();

zplata

class SimpleStateMachine extends StatefulWidget {
  const SimpleStateMachine({Key? key}) : super(key: key);

  @override
  _SimpleStateMachineState createState() => _SimpleStateMachineState();
}

class _SimpleStateMachineState extends State<SimpleStateMachine> {
  bool oneHeart = false;
  late SMIInput<bool> oneHeartStateMachineInput;

zplata

class _TestAnimationState extends State<TestAnimation> {
  late SimpleAnimation _controller;
  late Artboard _artboard;

  bool get isPlaying => _controller.isActive;

  @override
  void initState() {
    super.initState();
    _controller = SimpleAnimation('Complex animation 2');

zplata

import 'package:flutter/material.dart';
import 'package:rive/rive.dart';

class TestAnimation extends StatefulWidget {
  const TestAnimation({Key? key}) : super(key: key);

  @override
  _TestAnimationState createState() => _TestAnimationState();
}

zplata

    <canvas id="canvas1" height="300" width="300"></canvas>
    <canvas id="canvas2" height="300" width="300"></canvas>
    <canvas id="canvas3" height="300" width="300"></canvas>
    <canvas id="canvas4" height="300" width="300"></canvas>
    <canvas id="canvas5"height="300" width="300"></canvas>
    <canvas id="canvas6" height="300" width="300"></canvas>
    <canvas id="canvas7" height="300" width="300"></canvas>
    <canvas id="canvas8" height="300" width="300"></canvas>
    <canvas id="canvas9" height="300" width="300"></canvas>
    <canvas id="canvas10" height="300" width="300"></canvas>

zplata

import 'regenerator-runtime';
import RiveCanvas from '../../../js/npm/webgl_advanced_single/webgl_advanced_single.mjs';
// import RiveCanvas from '../../../js/npm/canvas_advanced_single/canvas_advanced_single.mjs';
// import Animation from './look.riv';
// import Animation2 from './tape.riv';
// import BirdAnimation from './birb.riv';
import TruckAnimation from './truck.riv';
// import HeroAnimation from './falling.riv';
import './main.css';