🎮 Demo Widget Inline - Pokemon Cards

Este widget se inyecta dentro de divs con clases específicas, en lugar de aparecer como overlay flotante.

🔧 Controles de Demo

API Key:

Layout: Tema:

🎧 Imagen del Producto

Auriculares Gaming Pro

$129.99

Auriculares gaming de alta calidad con sonido envolvente 7.1, micrófono con cancelación de ruido y iluminación RGB personalizable.

Layout Horizontal

                <div class="pokemon-horizontal"></div>

                <script>
                window.PokemonCardsInlineConfig = {
                apiKey: 'tu_api_key',
                targetSelector: '.pokemon-horizontal',
                layout: 'horizontal',
                maxCards: 3
                };
                </script>

Layout Vertical

                <div class="pokemon-vertical"></div>

                <script>
                new PokemonCardsInlineWidget({
                apiKey: 'tu_api_key',
                targetSelector: '.pokemon-vertical',
                layout: 'vertical',
                customTitle: 'Cartas Relacionadas'
                });
                </script>

Layout Grid

                <div class="pokemon-grid"></div>

                <script>
                new PokemonCardsInlineWidget({
                apiKey: 'tu_api_key',
                targetSelector: '.pokemon-grid',
                layout: 'grid',
                maxCards: 6,
                showTitle: false
                });
                </script>

Widget en Sidebar

Este es un ejemplo de cómo el widget puede integrarse en una barra lateral. El widget se adapta automáticamente al ancho del contenedor y puede coexistir con el contenido principal de la página.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Widget en Footer

Múltiples Widgets con la misma clase

Puedes tener múltiples contenedores con la misma clase y el widget se inyectará en todos:

Widget 1

Widget 2

                <div class="pokemon-multiple"></div>
                <div class="pokemon-multiple"></div>

                <script>
                // Se inyectará en TODOS los elementos con esta clase
                new PokemonCardsInlineWidget({
                apiKey: 'tu_api_key',
                targetSelector: '.pokemon-multiple',
                layout: 'horizontal'
                });
                </script>